事件流讲解来袭,嘎嘎嘎嘎嘎

----------------------------------------------------------------

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的更多相关文章

  1. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  2. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  3. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  4. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  5. javascript - 事件详解

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  6. JavaScript事件详解

    1.事件传播机制:事件冒泡,事件捕获.      2.注册事件处理程序方式: 设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,o ...

  7. javascript - 事件详解(阻止事件冒泡+阻止事件行为)

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  8. 原生JavaScript事件详解

    JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一 ...

  9. 第三天:JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

随机推荐

  1. WITH AS 优化逻辑读

    SQL> select * from fxqd_list_20131115_new where (acct_no, oper_no, seqno, trans_amt) not in (sele ...

  2. Oracle RAC的五大优势及其劣势

    Oracle RAC的五大优势及其劣势 不同的集群产品都有自己的特点,RAC的特点包括如下几点: 双机并行.RAC是一种并行模式,并不是传统的主备模式.也就是说,RAC集群的所有成员都可以同时接收客户 ...

  3. bzoj2002

    这道题学习了一种简洁的解决一些数据结构题的方法——分块法这道题方法很多,但分块写起来只有1kb左右,非常的简洁(但不是非常的高效)首先很容易思考到一种暴力的做法,从后往前推,很容易搞出每个点会弹几次弹 ...

  4. 一起啃PRML - 1 Introduction 绪论

    一起啃PRML - 1 Introduction @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ 这一部分主要是介绍一下Pattern Recogni ...

  5. WordPress Download Monitor插件跨站脚本漏洞

    漏洞名称: WordPress Download Monitor插件跨站脚本漏洞 CNNVD编号: CNNVD-201308-139 发布时间: 2013-08-14 更新时间: 2013-08-14 ...

  6. ☀【组件 - 工具】Parallax 视差

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. codeforces -- 283A

    A. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input standar ...

  8. PHP函数:PHP_SELF

    php_self是php的内置变量,记作$php_self,其作用是实现“页内跳转”.这里的页内跳转不同等于html的书签之类的跳转,而是php程序通过URL的尾参数的改变在同一个程序里提供不同的We ...

  9. Intersecting Lines - POJ 1269(判断平面上两条直线的关系)

    分析:有三种关系,共线,平行,还有相交,共线和平行都可以使用叉积来进行判断(其实和斜率一样),相交需要解方程....在纸上比划比划就出来了....   代码如下: ================== ...

  10. hdoj 2524 矩形A + B【递推】

    矩形A + B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...