事件代理
㈠ js事件委托和ja事件代理有什么区别
事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,利用冒泡的原理,把事件加到父级上,触发执行效果
-------------------------------------------------------------------------
如果我们不想或不能够直接操纵目标对象,我们可以利用delegate创建一个代理对象来调用目标对象的方法,从而达到操纵目标对象的目的。代理对象要拥有目标对象的引用。这就是事件代理(也就是说不会直接去操纵对象)
㈡ 在js中,事件代理和事件委托是什么区别啊,怎么解释啊
事件代理和事件委托实际上说的是同一件事,只是站在不同的角度来说的。比如说元素A把事件处理委托给自己的父元素B去处理,那么A就是事件委托方,而B就是事件代理方,两者参与的实际上是同一件事。
㈢ vue 在 v-for 时给每项元素绑定事件需要用事件代理吗为什么
不需要,直接监听就行,如果循环的是组件,而且组件没有支持该事件,需要加native修饰符(一般UI库会对这个做支持,兼听不到事件的时候才需要加)
㈣ android中有没有事件代理模式
安卓里面有监听事件的,具体操作如下:
//1.首先让你的Activity或者fragment实现View.OnClickListener接口比如 MainActivity extends AppCompatActivity implements View.OnClickListener{
//比如xml里面有很多Button Button button1;
Button button2;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button1 = (Button) findViewById(R.id.button1);
button2 = (Button) findViewById(R.id.button2);
}
//2.添加监听器,比如 button1.setOnItemClickListener(this);
button2.setOnItemClickListener(this);
//3.重写onClick方法,根据不同的View的id进行判断点击的是哪一个View控件 @override public void onClick(View v){
//你可以通过这个view就可以判断你当前的页面里面有哪些控件。 switch(v.getId()){
case R.id.button1: //假如点击的是button1,这里就可以执行与之相应的逻辑操作。。 break;
case R.id.button2: //假如点击的是button2,这里就可以执行与之相应的逻辑操作。。 break;
}
}
}
㈤ Javascript中的事件代理是怎么工作的
事件代理:抄
用到了两个在JavaSciprt事件袭中常被忽略的特性:事件冒泡以及目标元素。
当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现。使用事件代理,我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以得知这个事件是从哪个元素开始的。
㈥ 原生javascript 怎么事件代理 addeventlistener
事件代理就复好比,有一个小队制,共十人,给其中一人绑上一个大喇叭,你要找张三的时候,直接告诉绑上大喇叭的人,大喇叭一喊:咱们队伍中叫张三的给我出来。这个过程就叫做事件代理。
http://www.cnblogs.com/ARMdong/articles/javascript_delegate.html
㈦ 列举C#代理和事件的几种常用方法,代理对象、代理控件等 不一定要能运行 主要参考下过程。麻烦大侠!加分
事件通过委托 执行方法 再看看多播委托 回调函数 再结合网上的例子 练习下 就明白了
㈧ 请用两段完整的代码说明js 中普通事件绑定和事件代理的区别并说明事件代理相对于事件绑定的优势
普通
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<inputtype="button"id="btn"value="点击">
</body>
<script>
document.getElementById('btn').onclick=function(){
alert(this.value)
}
</script>
</html>
委拖
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<inputtype="button"id="btn"value="点击">
</body>
<script>
document.body.onclick=function(e){
if(e.target.id=='btn')alert(e.target.value);
}</script>
</html>
优势
如果有大量动态生成的元素,普通的绑定方式会有很多不便,委托的方式有更好的性能和灵活性。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<inputtype="button"id="new"value="新建">
</body>
<script>
vari=0;
document.getElementById('new').onclick=function(){
varnode=document.createElement('BUTTON');
vartext=document.createTextNode('委托-'+i);
varattr_id=document.createAttribute('id');
attr_id.value='i_'+i;
node.setAttributeNode(attr_id);
node.appendChild(text);
document.body.appendChild(node);
i++;
}
document.body.onclick=function(e){
if(e.target.tagName=='BUTTON')
alert('id='+e.target.id);
}
</script>
</html>
㈨ jquery中以下哪些方法可以实现事件代理
H5e教育Html5为您解答:
1.事件代理的原理和意义
实现原理是利用了浏览器的事件冒泡和事件源(target)。
在js中事件会冒泡到父级节点,所以我们可以在父级节点进行事件代理。例如一个使用jQuery的函数:
$("#tab td").click(function(){
$(this).css("background","red");
}) ;
上面的函数给一个tab的td加了一个单击事件,但是如果表格1000行,就得绑定1000次,
$("#tab").bind("click",function(ev)){
var $obj=$(ev.target);
$obj.css("background","red");
}
以上用bind函数将click绑定到了tab上,从而实现事件代理。
2.jQuery中的绑定函数
(1).bind()为每个匹配元素的特定事件绑定事件处理函数
$("#niu").bind('click',function(){
alert("hello niuniu");
});
此代码把id为niu的元素响应事件click,并显示警报。使用bind绑定多个事件时,可以这样
$("#niu").bind('mouseenter mouseleava',function(){
$(this).css("background","yellow");
});
$("#foo").bind({
click:function(){
},
mouseenter:function(){
}
});
(2).delegate()指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
$("table").delegate("td","click",function(){
$(this).toggleClass("chosen");
});
(3).on在选择元素上绑定一个或多个事件的事件处理函数
function greet(event) { alert("Hello"+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);
(4).live给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
$("a").live("click", function() { return false; })
以上是常用的绑定函数。
技术文档引用:
自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;同时,任何在 DOM 树中,比这些元素低的元素上绑定的相同事件,在 .delegate() 事件被调用的时候,也会被触发。因此,如果要在事件中阻止委托事件被触发,可以调用event.stopPropagation()或者返回false防止委派处理程序冒泡。
简单来说,.bind()是直接绑定在元素上,而.live()和.delegate()则是通过冒泡的方式来绑定到元素上的。.bind()方法只能给当前存在的元素绑定事件,对于事后采用JS方式新生成的元素无效,而live方法可以对后生成的元素也可以绑定相应的事件。