Menu
Woocommerce Menu

方法用法实例,事件流详解

0 Comment

本文实例讲述了jQuery中triggerHandler()方法用法。分享给大家供大家参考。具体分析如下:

1.冒泡型事件

本文实例讲述了jQuery中delegate()方法用法。分享给大家供大家参考。具体分析如下:

此方法触发被选元素的指定事件类型。
从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别。以下是主要区别:

浏览器的事件模型分两种:捕获型事件和冒泡型事件。由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解。
(dubbed
bubbling)冒泡型指事件安装最特定的事件到最不特定的事件逐一触发。

此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数。

1.此方法不会触发浏览器默认事件。
2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡。
3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。

复制代码 代码如下:

语法结构:

语法结构:

    <body onclick=”add(‘body<br>’)”>
        <div onclick=”add(‘div<br>’)”>
            <ponclick=”add(‘p<br>’)”> click me</p>
        </div>
    </body>
    <div id=”display”>

复制代码 代码如下:

复制代码 代码如下:

    </div>
    <script type=”text/javascript”>
        function add(sText) {
            var ulo = document.getElementById(“display”);
            ulo.innerHTML += sText;
        }
    </script>

$(selector).delegate(childofselector,type,data,function)

$(selector).triggerHandler(event,[param1,param2,…])

以上三个函数都添加了onclick函数,单机p元素后三个函数都触发,先执行了p元素,再执行了div,最后执行了body

参数列表:

参数列表:

这这里顺便提醒下捕获型事件,它的顺序正好和冒泡型事件相反。

参数 描述
childofselector 定义要附加事件处理程序的一个或多个子元素。
type 可选。定义附加到元素的一个或多个事件类型。由空格分隔多个事件值。
data 定义传递到事件处理函数的额外数据。
function 定义当事件发生时运行的函数。
参数 描述
event 规定指定元素要触发的事件类型。
param 可选。传递到事件处理程序的额外参数。

2.事件监听

实例代码:

实例代码:

一个事件都需要函数来响应,这类函数通常称为事件处理函数(enent 
handler),从另外一个角度看,这些函数都在实时监听着是否有事件发生,通常称为事件监听函数(enevt
listener),事件监听函数对于不同的浏览器区别较大。

复制代码 代码如下:

复制代码 代码如下:

i.通用监听方法,比如使用onclick方法,几乎每个标签都支持此方法。而且浏览器兼容性都很高
考虑到行为,事件分离。
一般使用使用以下方式进行监听

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
li{
  list-style-type:none;
  width:150px;
  height:150px;
  border:1px solid green;
}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“div”).delegate(“button”,”click”,function(){
    $(“li”).slideToggle();
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>脚本之家欢迎您</li>
  </ul>
  <button>点击查看效果</button>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
div{
  width:200px;
  height:200px;
  border:1px solid blue;
}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“div”).click(function(){
    $(“div”).append(“脚本之家”);
  });
  $(“button”).click(function(){
    $(“div”).triggerHandler(“click”);
  })
})
</script>
</head>
<body>
<div></div>
<button>查看效果</button>
</body>
</html>

复制代码 代码如下:

以上代码可以div的子元素button元素注册click事件处理函数,当点击按钮的时候能够实现隐藏和显示的切换。

希望本文所述对大家的jQuery程序设计有所帮助。

<body>
<div id=”me”>click</div>
<script type=”text/javascript”>
var opp = document.getElementById(“me”); //找到事件
opp.onclick = function(){                   //设置事件函数
    alert(“我被点击了!”)
}
</script>
</body>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery中trigger()方法用法实例
  • jquery
    trigger伪造a标签的click事件取代window.open方法
  • jQuery如何使用自动触发事件trigger
  • jquery的trigger和triggerHandler的区别示例介绍
  • jquery中trigger()无法触发hover事件的解决方法
  • jquery
    trigger函数执行两次的解决方法
  • jQuery
    trigger()方法用法介绍
  • jQuery中trigger()与bind()用法分析
  • jquery
    trigger实现联动的方法
  • jQuery中值得注意的trigger方法浅析

以上介绍的两者方法都十分便捷,在制作处理一些小功能时都被光大开发者所喜爱。但对于同一个事件。他们都只能添加一个函数,列如对于p标记的onclick函数,利用这两种方法都只能有一个函数,因此,ie有自己的解决办法,同事,标准的dom则规定了另外一种方法。

您可能感兴趣的文章:

  • 详解jquery事件delegate()的使用方法
  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
  • 浅谈jquery中delegate()与live()
  • jQuery事件绑定on()、bind()与delegate()
    方法详解
  • jQuery事件
    delegate()使用方法介绍
  • jQuery中的.bind()、.live()和.delegate()之间区别分析
  • jQuery中delegate()方法的用法详解
标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图