javascript事件详解1
事件流讲解来袭,嘎嘎嘎嘎嘎
----------------------------------------------------------------
1.事件流:描述的是在页面中接受事件的顺序。
2.事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)。
3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件。
--------------------------------------------------------------------
事件处理:
1.HTML事件处理:直接添加到HTML结构中(例:之前的onclick等,可以往前查看例子)。
2.DOM0级事件处理:把一个函数赋值给一个事件处理程序属性。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例(针对2):<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn.onclick=function(){
alert("hello,DOM0级事件处理程序1。");
}
</script>
结果:界面出现,鼠标点击按钮后,弹出对话框
若在上述代码中稍做改变:
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn.onclick=function(){
alert("hello,DOM0级事件处理程序1。");
}
btn1.onclick=function(){
alert("hello,DOM0级事件2.");
}
</script>
结果:界面出现一按钮,鼠标点击后弹出对话框
我们可以发现对二个函数对第一个进行了覆盖,即这就是DOM0级事件的缺点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.DOM2级事件处理:
(1)addEventListener("事件名",“事件处理函数”,“布尔值”)
true:事件捕获。
false:事件冒泡。
(2)removeEventListener();
详细前几我上篇里面的 DOM EventListener.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
例:
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn").addEventListener("click",demo);
function demo(){
alert("DOM2事件。");
}
</script>
结果:按钮,点击按钮,弹出提示框DOM2事件。
优点:对比于DOM0级事件,DOM2级不会有覆盖现象。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-----------------------------------------------------------------------------------------
4.IE事件处理程序
attachEvent:添加事件;
detachEvent:移除事件。
(ps:这两个的运用原理跟addEventListener()和removeEventListener()差不多,只是涉及到浏览器的是否能执行后用的,处理兼容问题。)
-------------------------------------------------------------------------------------------
例:(解决了兼容问题的例子,综合例子。)
<div>
<button id="btn1">按钮</div>
</div>
<script>
var btn1=document.getElementById("btn1");
if(btn1.addEventListener()){
btn1.addEventListener("cilck",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo);
}else{
btn1.onclick=demo();
}
function demo(){
alert("综合例子");
}
</script>
javascript事件详解1的更多相关文章
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- javascript - 事件详解
一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
- JavaScript事件详解
1.事件传播机制:事件冒泡,事件捕获. 2.注册事件处理程序方式: 设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,o ...
- javascript - 事件详解(阻止事件冒泡+阻止事件行为)
一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
- 原生JavaScript事件详解
JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一 ...
- 第三天:JS事件详解-事件流
学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容: 1)基础概念 2)举例说明: 代码如上,如果用事件 ...
随机推荐
- WITH AS 优化逻辑读
SQL> select * from fxqd_list_20131115_new where (acct_no, oper_no, seqno, trans_amt) not in (sele ...
- Oracle RAC的五大优势及其劣势
Oracle RAC的五大优势及其劣势 不同的集群产品都有自己的特点,RAC的特点包括如下几点: 双机并行.RAC是一种并行模式,并不是传统的主备模式.也就是说,RAC集群的所有成员都可以同时接收客户 ...
- bzoj2002
这道题学习了一种简洁的解决一些数据结构题的方法——分块法这道题方法很多,但分块写起来只有1kb左右,非常的简洁(但不是非常的高效)首先很容易思考到一种暴力的做法,从后往前推,很容易搞出每个点会弹几次弹 ...
- 一起啃PRML - 1 Introduction 绪论
一起啃PRML - 1 Introduction @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ 这一部分主要是介绍一下Pattern Recogni ...
- WordPress Download Monitor插件跨站脚本漏洞
漏洞名称: WordPress Download Monitor插件跨站脚本漏洞 CNNVD编号: CNNVD-201308-139 发布时间: 2013-08-14 更新时间: 2013-08-14 ...
- ☀【组件 - 工具】Parallax 视差
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- codeforces -- 283A
A. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input standar ...
- PHP函数:PHP_SELF
php_self是php的内置变量,记作$php_self,其作用是实现“页内跳转”.这里的页内跳转不同等于html的书签之类的跳转,而是php程序通过URL的尾参数的改变在同一个程序里提供不同的We ...
- Intersecting Lines - POJ 1269(判断平面上两条直线的关系)
分析:有三种关系,共线,平行,还有相交,共线和平行都可以使用叉积来进行判断(其实和斜率一样),相交需要解方程....在纸上比划比划就出来了.... 代码如下: ================== ...
- hdoj 2524 矩形A + B【递推】
矩形A + B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...