事件（一）绑定与解除事件
一.如何绑定事件处理函数
1.DOM.onxxx = function (event){}
div.onclick = function(){}兼容性很好 但是一个元素的同一个事件只能绑定一个处理程序
基本等用于 写在html行间上
2.DOM.addEventListener(事件类型,处理函数)
obj.addEventListener('click', function(){
console.log('a');
});3.DOM.attachEvent（'on'+事件类型，处理函数）
div.attachEvent('onclick', function(){});二.事件处理程序的运行环境
1.DOM.onxxx = function (event){}
程序this指向DOM元素本身
2.DOM.addEventListener(事件类型,处理函数)
程序this指向DOM元素本身
3.DOM.attachEvent（'on'+事件类型，处理函数）
div.attachEvent('onclick', function(){handle.call(div);//会指向div
});
function handle(){this.xxx = xxx;
}三.事件处理模型---事件冒泡 捕获
注意： 一个对象的一个事件类型上面绑定到的一个处理函数 只能遵循一种事件模型
1.事件冒泡
结构上（非视觉上）嵌套关系的元素 会存在事件冒泡的功能 即同意事件 自子元素冒泡向父元素（自底向上）
2.事件捕获
结构上（非视觉上）嵌套关系的元素 会存在事件捕获的功能 即同一事件 自父元素捕获至子元素 （事件源元素）
3.触发顺序 先捕获 后冒泡
一个对象的一个对象类型绑定两个处理函数 一个遵循事件捕获 一个遵循事件冒泡 触发顺序是 先捕获 后冒泡
4.focus, blur, change, submit, reset, select等事件不冒泡
四.取消冒泡和阻止默认事件
1.取消冒泡
事件对象 在每个事件处理函数上面可以写一个形参 系统会帮助传这个形参即事件对象 事件对象上面有很多属性 属性记载了事件发生时的一列数据和信息
（1）stopPropagation() 不支持ie9以下版本
（2）stopPropagation（）
document.onclick = function(){console.log('xxx');
}
var div = document.getElementByTagName('div');
div.onclick = function(e) {//e即为事件对象e.stopPropagation();this.style.background = "green";//如果没有上面一行的取消冒泡操作，//点击div时背景既会变成绿色，也会打印console.log中的内容。//（因为他是整个页面上的点击事件内容）
}2.阻止默认事件
，默认事件： 表单提交 , a标签跳转 ， 右键菜单等
（1） rerurn false 以对象属性方式注册的事件才生效
阻止右键弹出菜单
document.oncontextmenu = function() {console.log('a');return false;
}（2）event.preventDefault();W3C标准，IE9以下不兼容
document.oncontextmenu = function(e) {e.preventDefault();console.log('a');
}（3）event.returnValue = false;兼容IE
（4）封装阻止默认事件的函数cancelHandler(event);
function cancelHandler(event){if(event.preventDefault()){event.preventDefault();}else{event.returnValue = false;}
}- a标签跳转默认跳到页面的开头，如何去掉这个默认事件呢？
<a href = "#">www.xxx.com</a>
//javascript
var a = document.getElementsByTagName('a')[0];
a.onclick = function(e) {cancelHandler(e);//利用上方的阻止默认事件的封装函数
}七.事件委托
利用事件冒泡 和事件源对象进行处理
（1）性能 不需要循环所有的元阿苏一个个绑定事件
（2）灵活 当有新的子元素时不需要重新绑定事件
//html
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
</ul>
//js
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {//li在ul内部，点击li部分时，会逐步冒泡给ulvar event = e || window.event;//事件对象var target = event.target || event.srcElement;//事件源对象console.log(target.innerText);
}事件（一）绑定与解除事件相关推荐
- 事件绑定及解除事件绑定
事件绑定的方式 1) ele.onXXX = function(event) {}this 指向 dom 2) ele.addEventListener(type, fn, false);一个事件可以 ...
- 原生js绑定和解除事件
// 事件绑定this.bindHandler = (function() {if (window.addEventListener) {// 标准浏览器return function(elem, t ...
- React中onscroll／onresize事件的绑定和解除
问题描述 在react中,通常使用onscroll/onresize事件来处理一些操作,比如你要实现react中的懒加载技术,可能要使用这两个事件. 在挂载的周期函数中,通过addEventListe ...
- div添加一个点击事件（绑定点击事件）
1.HTML onclick 事件属性 <input type="button" value="点我点我" onclick="ds()" ...
- 关于事件模型，js事件绑定和解除的学习
http://www.cnblogs.com/iyangyuan/p/4190773.html 原文的例子通俗易懂,很适合学习.主要讲了dom0和dom2的事件模型,以及捕获和冒泡,事件绑定和解除事件 ...
- 解密jQuery事件核心 - 绑定设计（一）
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- jquery-绑定事件与解除事件的绑定
考点 事件绑定,标签对象直接绑定事件 标签对象.事件(匿函) 例子: $("#btn").click(匿函)事件绑定,通过绑定的方法实现 标签对象.bind("事件名称& ...
- [JQuery 学习笔记] 解除事件绑定 unbind()
unbind() : 解除事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
最新文章
- python无效数据怎么办_Python使用sqlite插入数据无效的原因
- 禁止mysql+root,禁止MySQL root远程访问
- python一些简单操作_python列表的基本操作有哪些
- 服务器共享文件夹权限设置软件,局域网共享文件访问控制软件、共享文件夹权限设置软件的使用方法...
- error C2065: “cout”: 未声明的标识符
- MySQL之InnoDB索引的一些问题
- calltreetest中文_calltree查看工程代码中的函数调用关系
- vscode 国内镜像快速下载
- 查找在Git中删除文件的时间
- js最基础知识回顾1（参数，函数，网页换肤）
- uva1583-digit generator
- jeecg框架表格合计解决方案
- sw槽钢插件_SolidWorks所有实用插件详解一览
- 01、u3d自学课程
- MySQL 精选 60 道笔试题
- HTML绘制齿轮,使用css3制作齿轮loading动画效果
- DevOps流水线（1）什么是Pipeline流水线？
- 使用Cglib的BeanCopier实现Bean的拷贝
- 在WINDOWS 下删除EISA配置的隐藏分区
- Jupyter Lab的简洁安装与使用