一、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{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}