事件
1、事件是什么
让js知道程序用户行为，比如用户点击html页面中的某个按钮和用户输入用户名与密码等操作
<script> var button = document.getelementbyid('btn');// 获取按钮元素 button.onclick = function () {// 事件绑定 console.log('你已点了我'); } </script>
2.注册事件
js函数与指定事件相关联，被绑定函数成为事件的句柄
事件被激发时，会绑定函数会被调用
html元素的事件属性
表示实注册事件功能
该方式并没有与html结构与行为有效的分离
<body><button onclick="mylove()" id="btn">按钮</button><script> function mylove() { console.log('你已点了我'); }</script></body>
dom对象的事件属性
将document对象定位在thml页面元素
并返回dom对象体属性，通过它实现各种注册事件功能
<body><button id="btn">按钮</button><script> var btn = document.getelementbyid('btn'); btn.onclick = mylove; function mylove() { console.log('你已点了我'); }</script></body>
事件监听器
以addevantlisener()方法，调用该方法表示元素增加事件监听器
body><button id="btn">按钮</button><script> var btn = document.getelementbyid('btn'); btn.attachevent('onclick',function () { console.log('xxx'); }) function bind(element,eventname, functionname) { if (element.addeventlistener) { element.addeventlistener() } }</script></body>
事件监听器中的this
使用addeventlistener()方法为页面注册事件时候，this是指注册事件元素
使用attacheent()方法为页面注册事件时候，this是指window对象，，不是注册事件
<script> var qyc =document.getelementbyid('qyc'); /*qyc.addeventlistener('click',function () { console.log(this);//this指当前绑定事件的元素 });*/ /*qyc.attachevent('onclick',function () { console.log(this);//this指当前环境的全局对象（window对象） });*/ bind(qyc,'click',function () { console.log(this);//在不同的浏览器中，this会有不同的表示 }); function bind(element, eventname, functionname) { if (element.addeventlistener) { } else { element.attachevent('on' + eventname, function () { functionname.call(element) }); } }//此为ie8之前的版本兼容的解决方案</script></body>
3、移除注册事件
removeeventlistener()方法，调用此方法表示元素移除事件听器
<body><button id="qyc">按钮</button><script> var qyc = document.getelementbyid('qyc'); function mylove() { console.log('xxx'); } qyc.addeventlistener('click',mylove); qyc.addeventlistener('click',function () { console.log('yyy'); }); qyc.removeeventlistener('click',mylove); function unbind(element,eventname,functionname) { if (element.removeeventlistener) { element.removeeventlistener(eventname, functionname); }else { element.detachevent('on' + eventname, functionname); } }</script></body>
4、event事件对象
表示移除注册事件在ie8之前版本的
浏览器不支持removeeventlistener()方法
<body><button id="qyc" onclick="mylove(event)">按钮</button><script> var qyc = document.getelementbyid('qyc'); qyc.addeventlistener('click',function (event) { console.log(event); }); qyc.attachevent('onclick',function () { console.log(window.event); }); function bind(element,eventname, functipnname) { if (element.addeventlistener){ element.addeventlistener(eventname,functipnname) } else { element.attachevent('on' + eventname, function(){ functipnname.call(element); }); } }</script>
5、获取目标
event事件对象提供target属性，获取触发当前事件的html元素
event事件对象提供currenttarget属性，获取注册当前事件的html元素
<style> ul { background-color: red; } #wl { background-color: blue; } a { background-color: yellow; } </style></head><body><ul id="yx"> <li>单机游戏</li> <li id="wl"><a href="#">网络游戏</a></li> <li>手机游戏</li></ul><script> var yx = document.getelementbyid('yx'); yx.addeventlistener('click',function (event) { console.log(event.target);// target属性-获取绑定当前事件目标元素 console.log(event.currenttarget);// currenttarget属性-获取绑定当前事件目标元素 console.log(this); }); yx.attachevent('onclick',function (event) {// ie8以下浏览器提供srcelement属性为target目标元素 var e = event || window.event; console.log(e.srcelement); });</script></body>
6、阻止默认行为
不使用默认，而是
<body><a href="#">链接</a><script> var aelement = document.getelementsbyname('a'); /*aelement.addeventlistener('click',function(event){ event.preventdefault();// 阻止默认行为 });*/ aelement.onclick = function (event) { event.preventdefault(); return false; } aelement.attachevent('onclick',function (event) { var e = event || window.event; e.returnvalue = false; })</script></body>
7、获取鼠标
pagex和pagey表示相对于页面中
clientx和clienty表示可视区域
screenx和screeny表示在当前屏幕的
<body><script> var html = document.documentelement; html.addeventlistener('click',function(event){ console.log(event.pagex, event.pagey); // 鼠标坐标值相对于当前html页面 console.log(event.clientx, event.clienty); // 鼠标坐标值相对于当前可视区域 console.log(event.screenx, event.screeny); // 鼠标坐标值相对于当前屏幕的 // 鼠标坐标值只能获取，不能设置 });</script></body>
8、事件流
<style> #q1 { width: 200px; height: 200px; background-color: red; padding: 50px; } #q2 { width: 100px; height: 100px; background-color: yellow; padding: 50px; } #q3 { width: 100px; height: 100px; background-color: blue; } </style></head><body><div id="q1"> <div id="q2"> <div id="q3"></div> </div></div><script> var q1 = document.getelementbyid('q1'); q1.addeventlistener('click',function(){ console.log('这是d1... ...'); }, false); var q2 = document.getelementbyid('q2'); q2.addeventlistener('click',function(){ console.log('这是d2... ...'); }, false); var q3 = document.getelementbyid('q3'); q3.addeventlistener('click',function(event){ console.log('这是q3... ...'); event.stoppropagation(); }, false);</script></body>
9、事件委托
大量的html元素注册相同事件，并事件句柄逻辑安全相同，会造成页面速度下降，不果事件流允许这些html元素同父级元素注册事件
<body><div id="qh"> <button id="qyc1">按钮</button> <button id="qyc2">按钮</button> <button id="qyc3">按钮</button></div><script> var qyc1 = document.getelementbyid('qyc1'); qyc1.addeventlistener('click',function(){ console.log('这是个按钮'); }); var qyc2 = document.getelementbyid('qyc2'); qyc2.addeventlistener('click',function(){ console.log('这是个按钮'); }); var qyc3 = document.getelementbyid('qyc3'); qyc3.addeventlistener('click',function(){ console.log('这是个按钮'); }); var qh = document.getelementbyid('qh');// 不把事件绑定给指定元素，绑定给共同父级和祖先元素 qh.addeventlistener('click',function (event) { var target = event.target;//触发事件目标元素 if(targe.nodename === 'button') { console.log('这是个按钮'); } })</script></body>
相关推荐：
js的dom事件模型分析
理解javascript中dom事件_javascript技巧
以上就是javascript中dom的事件分析（附代码）的详细内容。