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 ...
随机推荐
- python实现RGB转换HSV
def rgb2hsv(r, g, b): r, g, b = r/255.0, g/255.0, b/255.0 mx = max(r, g, b) mn = min(r, ...
- phpcms v9 更改首页
phpcms v9的默认首页是(域名/index.php?m=content&c=index&a=init)那为什么你直接敲一个域名它就自己进 去了呢,其实在caches-->c ...
- 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序
首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...
- Java缓存机制
1 Java缓存 1.1 jvm内置缓存 Java中实现缓存的方式有很多,比如用static hashMap基于内存缓存的jvm内置缓存,简单不实用,保对象的有效性和周期无法控制,容易造成内存急剧上升 ...
- 修改docker下mysql配置
1.在/home/smile/docker/mysql/config/目录下增加一个文件 my.cnf # Copyright (c) , Oracle and/or its affiliates. ...
- 第五周学习总结&实验报告（三）
第五周学习总结&实验报告(三) 这一周又学习了新的知识点--继承. 一.继承的基本概念是: *定义一个类,在接下来所定义的类里面如果定义的属性与第一个类里面所拥有的属性一样,那么我们在此就不需 ...
- 哈夫曼（Huffman）树及其应用
Huffman树又称最优树,是一类带权路径长度最短的树,带权路径长度为从该节点到树根之间的路径长度与节点上权值的成积. 那么如何构建一个Huffman树呢?就需要Huffman算法 1.利用给定的n个 ...
- UNITY ET 框架
GITHUB上近3000星的开源框架,包括了服务器客户端,IL RUNTIME热等特点,对于新项目,值得拥有
- Python可变数据类型list填坑一则
前提概要 最近写业务代码时遇到一个列表的坑,在此记录一下. 需求 现在有一个普通的rule列表: rule = [["ID",">",0]] 在其他地方经 ...
- windows 10 取消alt+tab的预览功能
1.win+r 输入regedit打开注册表编辑器 2.HKEY_CURRENT_USER/SOFTWARE/Microsoft/Windows/CurrentVersion/Explorer 3. ...