jQuery进阶第二天（2019 10.10）
一、事件流程
1.事件的三要素：
- 事件源：发生事件的对象
- 事件类型：类型比如单击、双击、鼠标的移入、移除
- 事件处理程序: 触发事件之后做些什么，事件处理的函数
<body>
<button onclick="alertWindow()"></button>
<script>
/*
*1.事件对象 button
*2. 事件对象绑定的一个事件类型
*3.事件句柄：如函数，属性值
*/
function alertWindow(){
alert("我被点击了")
}
</script>
</body>
2.事件分为三个阶段：
- 事件捕获阶段：事件是由最外层的元素向目标元素传递的过程（IE不支持事件捕获）
- 事件处理阶段：事件正位于目标元素之上
- 事件冒泡阶段：有目标元素向外层元素传递的过程
3.事件发生顺序：
- 事件捕获--》事件处理--》事件冒泡
- 事件的捕获和冒泡指的是当前元素的子元素跟当前元素拥有相同的事件，触发子元素的时候，当前元素对应事件发生在什么阶段
二 DOM 事件
1 DOM0级事件
在js中 为元素的事件相关属性赋值：
实现了内容与行为分离，但是元素仍只能绑定一个监听函数document.getElementById("btn").onclick = function(){//....}
document.body.onload = init;
function init(){//........} dom0级都属于冒泡阶段
<body>
<button id="btn">点击我</button>
<script>
var btn=document.getElementById("btn");
var clickme=function(){
alert("我已经被点击");
}
</script>
2 DOM2级添加/移除事件
高级事件处理方式，一个事件可以绑定多个监听函数：
btn.addEventListener("click", function(){},false); // DOM // false:冒泡事件 true：捕获事件
btn.attachEvent("onclick", function(){});//IE
document.body.addEventListener("load", init);
document.body.attachEvent("onload", init);
function init(){}此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题。
三种方法优缺点：
1.HTML中定义 html中书写js，强耦合 复用性很低
2.DOM0级，事件对象的属性添加绑定事件 松耦合 有且只能绑定一个事件（后面绑定的事件把前面绑定的事件覆盖）
3.DOM2级事件，通过addEventListener函数绑定事件，松耦合 可以绑定多个事件，事件捕获和事件冒泡
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件，冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流) DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)，在IE8及以下的事件处理中，事件含有on，如onclick等。 1 非IE高级浏览器
移除事件 removeEventListener()
事件解绑成功的主要原因就是：保持removeEventListener和addEventListener里面的参数相同，即第二个参数不能使用匿名函数的方式
2 IE事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IE事件处理程序</title>
</head>
<body>
<button id="mybtn"></button>
<script>
//html属性添加事件
//DOM0级事件绑定 兼容所有浏览器
/*D0M2J事件绑定 addEVentListener:chrome,firefox,IE9等
attacheEVent：IE8及IE8一下的浏览器*/
var btn=document.getElementById("mybtn");
var clickme=function(){alert("Clicked");};
btn.attachEvent("onclick",clickme);
btn.attachEvent("onclick",clickme);
//移除事件绑定
btn.detachEvent("onclick",clickme); // this指向window
btn.attachEvent("onclick",function(){
alert(this===window);
});
</script>
</body>
</html>
3 IE的DOM2和DOM0的区别和执行顺序
1、首先执行DOM0级事件
2、按照绑定事件的倒序执行DOM2级事件
4 this指向
DOM0指向的是绑定事件的对象
DOM2指向window对象
1 DOM0级的情况：
高级浏览器会自动传递事件对象，只需要用形参接受即可使用
IE浏览器不会自动传递事件对象，需要手动接收，接受的方式为 e = window.event
DOM0兼容处理
var e = e || event
div.onclick = function(e) {
var e = e || event;
console.log(e);
}
2 DOM2级都可以传递事件对象，可以使用形参接收，然后直接使用
5 DOM2级事件跨浏览器事件处理程序
<script>
var EventUtil = {
addHandler: function(element, type, handler) {
//绑定事件
//Chrome Firefox IE9等 addEventListener
//IE8及IE8以下的浏览器 attachEvent
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
removeHandler: function(element, type, handler) {
//移除事件
//Chrome Firefox IE9等
//IE8及IE8以下的浏览器
if(element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if(element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
</script>
三、 事件对象的属性和方法
查看 ：
高级浏览器直接查看
IE浏览器需要使用for in 进行查看
// IE
div.attachEvent('onclick', function(e) {
// console.log(e);
for (var i in e) {
console.log(i, ' : ', e[i]);
}
});
offsetX和offsetY //
当前鼠标位于元素内的位置，但注意受子元素的影响
clientX和clientY //
鼠标位于视口的x值和y值
screenX和screenY //
距离屏幕左上角的x和y
pageX和pageY（IE不兼容）//
距离整个网页的顶点的x和y
四、阻止事件冒泡
高级浏览器使用：
方法：stopPropagation()
属性: cancelBubble = true cancelBubble 是否阻止冒泡 默认值为false
IE浏览器：
属性: cancelBubble = true cancelBubble 是否阻止冒泡 默认值为false
// 获得元素对象
var box = document.getElementById('box');
var carousel = document.getElementById('carousel'); // 绑定事件
carousel.onclick = function() {
console.log('carousel');
} 0box.onclick = function(e) {
console.log('box');
// 事件的兼容
var e = e || event; // console.log(e);
if ( e.stopPropagation) {
// 高级浏览器
e.stopPropagation();
} else {
// IE浏览器
e.cancelBubble = true;
}
}
五、阻止默认行为
1、event.returnValue：同preventDefault() 阻止默认行为，默认为ture，通过 event.returnValue=flase阻止。
2、event.cancelBubble：同stopPropagation() 阻止事件冒泡，默认为flase，通过event.cancelBubble = true阻止。
a链接在点击的时候，会自动跳转，元素标签的默认行为。表单中的提交按钮，当其被点击的时候，就会提交表单的数据，这也是其默认行为。
1 DOM0级的方式,阻止默认行为 return false
<script>
// 获得元素
var a = document.getElementsByTagName('a')[0];
// 绑定点击事件
a.onclick = function() {
alert('百度一下');
// DOM0级的方式,阻止默认行为
return false;
}
</script>
2 DOM2级阻止默认行为
高级浏览器：
e.preventDefault();
e.returnValue = false;
IE浏览器：
event.returnValue = false;
return false;
<script>
// 获得元素
var a = document.getElementsByTagName('a')[0]; / 绑定点击事件
if (a.addEventListener) {
// 高级浏览器
a.addEventListener('click', function(e) {
alert('百度一下');
// 方法
e.preventDefault();// 阻止默认行为
// e.returnValue = false;
});
} else {
// IE浏览器
a.attachEvent('onclick', function() {
alert('百度一下');
// return false;
// 事件对象的属性
event.returnValue = false;
});
}
</script>
jQuery进阶第二天（2019 10.10）的更多相关文章
- Java学习之JDBC 2019/3/10
Java学习之JDBC 大部分的程序都是用来通过处理数据来达到人们预期的效果,数据是粮食,没有数据操作的程序就像helloworld程序一样没有用处.因此数据库操作是重中之重,是程序发挥功能的基石,j ...
- Gitbook环境搭建及制作——2019年10月24日
1.gitbook介绍 GitBook 是一个基于 Node.js 的命令行工具,支持 Markdown 和 AsciiDoc 两种语法格式,可以输出 HTML.PDF.eBook 等格式的电子书.可 ...
- Alpha冲刺(10/10)——2019.5.3
所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(10/10)--2019.5.3 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...
- SPSS 2019年10月24日 今日学习总结
2019年10月24日今日课上内容1.SPSS掌握基于键值的一对多合并2.掌握重构数据3.掌握汇总功能 内容: 1.基于键值的一对多合并 合并文件 添加变量 合并方法:基于键值的一对多合并 变量 2. ...
- 终端、mac等小技巧——2019年10月18日
1.新建finder窗口 cmd+N 2.查看文件夹结构 brew install tree tree命令行参数(只实用与安装了tree命令行工具): -a 显示所有文件和目录. -A 使用ASNI绘 ...
- mac文本操作小技巧——2019年10月17日
声明:看的别人博主写的,自己整理的,非原创,只是自用. mac文本操作技巧 官方指导文档:https://support.apple.com/zh-cn/HT201236 1.光标移动 1.1 行首. ...
- Linux自用指令——2019年10月23日
1.ls ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. ls -a 列出目录所有文件,包含以.开始的隐藏文件 ...
- Visual Studio 2019 v16.10 和 v16.11 Preview 1 现已推出！
Visual Studio 2019 v16.10有什么新功能? 我们很高兴地宣布Visual Studio 2019 v16.10 GA 和 v16.11 preview 1发布.此版本使我们的主题 ...
- 开机时自动启动的AutoHotkey脚本 2019年10月09日
;;; 开机时自动启动的AutoHotkey脚本 2019年10月09日;; http://www.autoahk.com/archives/16600; https://www.cnblogs.co ...
随机推荐
- RPN
训练: 特征图是51x39x256,对该图像的每点考虑9个窗口:三种候选面积(128,256,512) x 三种尺度(1:1,1:2,2:1).这些候选窗口称为anchors.如下图: 如果图片尺寸w ...
- 论文阅读：Andromeda: Performance, Isolation, and Velocity at Scale in Cloud Network Virtualization （全文翻译用于资料整理和做PPT版本，之后会修改删除）
Abstract: This paper presents our design and experience with Andromeda, Google Cloud Platform’s net ...
- HDU3398—String-(组合数)
Problem Description Recently, lxhgww received a task : to generate strings contain '0's and '1's onl ...
- [BZOJ3990]:[SDOI2015]排序（搜索）
题目传送门 题目描述 小A有一个1-${2}^{N}$的排列A[1..${2}^{N}$],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1≤i≤N), ...
- c++结构体、共用体和枚举
结构体类型 c++中的结构体成员既可以是数据,也可以是函数 c语言中定义结构体变量必须加struct(这也是很多时候和typedef),但是在c++里面,可以不加 结构体和类的不同在于,结构体中的变量 ...
- 分布式工作流任务调度系统Easy Scheduler正式开源
分布式工作流任务调度系统Easy Scheduler正式开源 1.背景 在多位技术小伙伴的努力下,经过近2年的研发迭代.内部业务剥离及重构,也经历一批种子用户试用一段时间后,EasyScheduler ...
- 一、Jmeter启动报错：Could not initialize class org.apache.jmeter.gui.util.MenuFactory
1.下载: plugins-manager.jar 包 2.地址:https://jmeter-plugins.org/install/Install/ 3.将jar包放到lib/ext 4.重启jm ...
- db4o这个对象数据库有很多优点，但为什么不是很火？ 大家有没有用过db4o的？
没有主键的概念(因为对象的内存地址,或者引用就能标志一个对象了).因而外界想指向一个具体的对象就比较困难(比如本页的url里的1079505). 激活/保存层次的问题.获取一个对象,它的字段引用了其它 ...
- nginx排查502错误
排查502错误1.查看/usr/local/nginx/conf/nginx.conf从而知道其错误日志在哪.重点查看其错误日志.2.如果是/tmp/dd.sock2017/05/01 18:48:3 ...
- 阶段3 1.Mybatis_11.Mybatis的缓存_7 触发清空一级缓存的情况
如果数据库的数据和一级缓存的数据不一致了,怎么做到同步的呢? 增加一个更新 用户信息的方法 增加更新的节点配置 测试类增加测试方法.先查询id为41的 然后更新了41的数据.再次查询41的数据 先把更 ...