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 ...
随机推荐
- 启用Executor初始化线程池
前言 上文我们介绍了JDK中的线程池框架Executor.我们知道,只要需要创建线程的情况下,即使是在单线程模式下,我们也要尽量使用Executor.即: ExecutorService fixedT ...
- MySQL的(@i:=@i+1)用处及用法
今天写一个为查询的数据排序列号的SQL语句,整理出来下面的笔记: 这是语法: SELECT (@i:=@i+1),t.* FROM table_name t,(SELECT @i:=0) AS j ...
- Django学习之缓存
1.配置 2.应用 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存.缓存将一个某个views的返回值保存至内存或者m ...
- Nginx+Php不支持并发，导致curl请求卡死（Window环境）
1.问题描述:项目中开发很多对外接口,于是在本项目中写了测试脚本来验证接口.然鹅,发现Curl请求出现卡死情况,没有响应. 2.具体原因:在window环境下配置的nginx+php环境时,windo ...
- CentOS7 下 Zabbix3.4 源码安装
zabbix系统基于PHP环境运行,所以前提是系统上有PHP的运行环境,lnmp或者lamp环境 lnmp环境安装:http://www.cnblogs.com/rnckty/p/7642034.ht ...
- js中的相等
概述 今天学习 jest,看文档的时候发现 jest 用到了 Object.is(),以前没有见过,所以记录下来,供以后开发时参考,相信对其他人也有用. 注意:Object.is的文档在这里 Obje ...
- 安装Mantis出现的一些问题解决
1.去除 Warning: date_default_timezone_get() 打开config_inc.php, 增加: $g_default_timezone = 'RPC'; 2.去除 S ...
- vue-loader分析
分析一下Vue2.0中的vue-loader是如何处理.vue单文件组件的: 1.vueLoaderplugin 作用是 找到.vue,.vue.html的rules然后在他们的rule里添加 pit ...
- Nil Channels Always Block（Go语言中空管道总是阻塞）
译自:https://www.godesignpatterns.com/2014/05/nil-channels-always-block.html 原作者:Alex Lockwood 在本篇文章中, ...
- appium输入和清除操作各方法对比(android)
最近在写android app自动化测试时,发现输入和清除操作耗费时间比较长,下面我用了不同的方法进行输入和清除操作,对比下时间(选取测试的一组数据做分析),选出最佳方法. 1.输入操作 1.1.we ...