一、js事件绑定在对象上的三种方法
a:将事件绑定在元素标签的属性上
<h3 onclick="console.log('奥特曼打怪兽')">海绵宝宝历险记</h3>
b:将事件作为属性添加到对象上
<h4>海绵宝宝历险记2</h4> window.onload = function(){ var h4 = document.getElementsByTagName('h4')[0]; h4.onclick = function(){ console.log('奥特曼第二次打怪兽'); } }
c:将事件作为方法添加到对象上。 方法名称:addElementListener()→ 向指定元素添加事件
<h4>海绵宝宝历险记3</h4> window.onload = function(){ var h4 = document.getElementsByTagName('h4')[0]; var fyh=function(){ console.log('奥特曼第三次打怪兽'); } h4.addEventListener('click',fyh,false); //事件名称、处理程序(回调方法)、false以冒泡方式处理 h4.removeEventListener('click',fyh,false); //将次方法移除;方法名称:removeEventListener } 事件监听→ 事件监听移除 true 的触发顺序总是在 false 之前;如果多个均为 true,则外层的触发先于内层;如果多个均为 false,则内层的触发先于外层。
二、冒泡事件和捕获事件
//捕获事件发生过程:window-document-body-div-button (从大到小)
//冒泡事件发生过程:div-body-document-window (从小到大)
a:冒泡事件
<h2>中国</h2> <ul> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> </ul>
<script>
window.onload = function(){
var li= document.getElementsByTagName('li');
var ul= document.getElementsByTagName('ul')[0];
document.body.onclick=function(m){
alert('我是body');
}
ul.onclick=function (m){
alert('我是ul');
}
for (var i=0;i<li.length;i++){
li[i].onclick=function (m){
alert('我是li');
//冒泡拦截
m.cancelBubble=true; //拦截冒泡
m.stopPropagation();
}
}
}
</script>
注:a:输出结果由内往外弹出我是li/ul/body
b:cancelBubble=true{true为拦截冒泡,默认值是false}
stopPropagation()
俩个同为拦截冒泡的方式,写在一起是为了浏览器兼容使用。
b:捕获事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div2{width:200px;height:200px;background:#f00;} </style> </head> <body> <div id="div2"> <div id="div1">点我</div> </div> <script> //事件的捕获 var div2=document.getElementById('div2'); var div1=document.getElementById('div1'); div2.addEventListener('click', function(event){console.log("A");}, false); // div2.addEventListener('click', function(event){console.log("B");}); div1.addEventListener('click', function(event){console.log("C");}, false); // div2.addEventListener('click', function(event){console.log("D");}, true); </script> </body> </html>
注:返回结果为C、A
三、addEventListener绑定click与直接写onclick的区别
<body> <!--addEventListener绑定click与直接写onclick的区别--> <ul id="difference"> <li id="add_event">11111111</li> <li id="on_click">22222222222</li> </ul> <script> var on_click = document.getElementById('on_click'); on_click.onclick=function(){ // alert('click1'); }; on_click.onclick=function(){ // alert('click2'); }; //onclick绑定了两次,由于click在同一时间只能指向唯一对象,所以当对象绑定了多次,只会出现最后一次绑定。 var add_event = document.getElementById('add_event'); add_event.addEventListener('click',function(){ alert('add_event1'); },false); add_event.addEventListener('click',function(){ alert('add_event2'); },false); //多次事件绑定的运行时使用 </script> </body>
四、onchange事件(HTML元素被改变)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); //获取X内的值,将input框内元素被 改变。 } </script> <body> 输入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p> </body> </html>
五、onkeydown(用户按下键盘按键)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function myFunction(){ alert("你在输入栏内按下一个键"); } </script> </head> <body> <p>当你在输入框内按下一个按键是函数被触发</p> <input type="text" onkeydown="myFunction()"> </body> </html>
六、onmouseover(用户把鼠标移到HTML上)和onmouseout(用户把鼠标移开HTML上)
{示例参考w3c}