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 ...
随机推荐
- Codeforces Round #345 （Div 2）
最后两题是orzCJK学长帮忙代打的,不过总算是到蓝名了(上次睡迟了,只剩半个小时,结果作大死点开题目看,结果rating掉了100多),还有论代码风格的重要性!!!(没写空格被学长各种D) A题 题 ...
- Spring Boot教程（二）关于RabbitMQ服务器整合
准备工作 15min IDEA maven 3.0 在开始构建项目之前,机器需要安装rabbitmq,你可以去官网下载,http://www.rabbitmq.com/download.html ,如 ...
- python3.7--pycharm selenium自启360浏览器/360极速浏览器方法
写于:2019.01.02(实测日) 参考文档:https://blog.csdn.net/five3/article/details/50013159 一.下载360浏览器或360极速浏览器的Chr ...
- SoapUI Pro官网原包百度云盘分享
SoapUI Pro下载是件很痛苦的事,经常断网,或者是下载时间过长,这里分享的是截止2019.01.01 最新的安装原包. 百度云盘资源:https://pan.baidu.com/s/1SXTFs ...
- sqli-labs29-31关Background-6 服务器（两层）架构
首先介绍一下29,30,31这三关的基本情况: 服务器端有两个部分:第一部分为tomcat为引擎的jsp型服务器,第二部分为apache为引擎的php服务器,真正提供web服务的是php服务器.工作流 ...
- [CSP-S模拟测试]:Six（数学）
题目传送门(内部题85) 输入格式 一个正整数$N$. 输出格式 一个数表示答案对$1000000007$取模后的结果 样例 样例输入1: 样例输出1: 样例输入2: 样例输出2: 样例输入3: 样例 ...
- 微信小程序那些开发缺点
早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑. UI组件过度封装. 微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式. PS: ...
- 在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
- Vue v-if以及 v-else 的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 你是一直认为 count(1) 比 count(*) 效率高么？
MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么? 有 Where 条件的 count, ...