一、javascript事件基础
1、什么是事件
2、事件的三要素
事件源>事件类型>事件处理程序
- 事件源：
事件被触发的对象，就是谁触发了这个事件
- 事件类型：
如何触发，什么事件，比如鼠标点击（onclick），鼠标经过，键盘按下。
- 事件处理程序：
通过一个函数赋值的方式完成
var btn = document,getElementById(“btn”)； btn.onclick = function (){
}这就是一个最简单的事件 3、事件执行的步骤
4.操作元素
js的dom操作可以改变网页内容，结构和样式，我们就可以利用dom操作元素来改变元素里面的内容 属性等
1、修改元素内容
2、修改元素属性
二、javascript事件高级
1、注册事件
传统注册方式：
方法监听注册方式
addEventList事件监听方式
listener：事件处理函数，事件发生时，会调用该监听函数
function addEventListener(element,eventName,fn) {
//判断当前浏览器是否支持addEventName方法 if(element.addEventListener(eventName,fn); //第三个参数默认是false }else if (element.attachEvent){
element.attachEvent('on'+eventName,fn); }else{
//相当于element.onclick = fn ; element['on'+eventName] = fn ; } 兼容性处理的原则：首先照顾大多数浏览器，再处理特殊的浏览器
2、解绑事件
解绑事件的方式
var divs = document.querySelectorAll('div'); divs[0].onclick = function (){
alert(11); //给第一个div解除绑定 divs[0].onclick = null; } eventTarget.detachEvent(eventNameWidthOn,callback);
divs[1].addEventListener('click',fn); //这里用fn是因为解绑事件的时候不能直接用function 所以使用fn来代替 divs[1].addEventListener('click',fn1); function fn(){
alert(22); divs[1].removeEventListener('click',fn1); } divs[1].attachEvent('click',fn2); function fn(){
alert(33); divs[1].rdatachEvent('click',fn2); } 这里我也封装了一个兼容性的函数，可以直接使用
function removeEventListener(element,eventName,fn){
//判断当前浏览器是否支持removeEventlistener方法 if( element.removeEventListener){
element.removeEventListener(event,fn); }else if(element.detachEvent){
element.detachEvent('on'+eventName,fn); }else{
element['on'+eventName] = null; } } 先写到这里去吃饭了，晚上回来在接着写
3、DOM的事件
注意点：
4、事件对象
定义：
事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击就包含鼠标坐标，键盘事件的信息，比如判断用户按下哪个键
具体位置
注意：
事件对象常见的属性和方法
区别
兼容性解决办法
事件对象本身的获取存在兼容问题：
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
- 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
解决:
e = e || window.event;
5、阻止事件冒泡
阻止事件冒泡的两种方法：
封装的兼容性函数：
if(e && e.stopPropagation){
e.stopPropagation(); }else{
window.event.cancelBubble = true; } 6、事件的委托（代理，委派）
事件委托也称为事件代理， 在 jQuery 里面称为事件委派。
原理：
7、常见的鼠标键盘事件
完结撒花！！！！！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208352.html原文链接：https://javaforall.net
