js 事件委托了 之后,怎么知道我点击可第几个li 或许下标

js 事件委托了 之后,怎么知道我点击可第几个li 或许下标,第1张

windowonload = function(){

  var oUl = documentgetElementById("ul");

  var aLi = oUlgetElementsByTagName("li");

   oUlonclick = function(ev){ 

    var ev = ev || windowevent;

    var target = evtarget || evsrcElement;

 if(targetnodeNametoLowerCase() == "li"){

 var that=target;

 var index;

 for(var i=0;i<aLilength;i++)if(aLi[i]===target)index=i;

 if(index>=0)alert('我的下标是第'+index+'个');

targetstylebackground = "red";

 }

   }

}

哦,其实没他们说的那么麻烦的,C1有一个属性就可以获取当前行,或者当前列的索引。C1FlexGridMouseCol 获取列

C1FlexGridMouseRow 获取行。

event对象是个嘛呀?其实event对象是一种事件的状态,它是事件身上自带的,而这个事件身上被绑定了事件的状态,如键盘的状态,鼠标位置,鼠标点击的状态等。

注意,是一种事件状态。为了直观,我先获取一个鼠标点击事件的event,这个event要传入被 *** 作的对象里,所以把event放入到function()的括号里

我们看到图里有很多英文,比如altKey、bubbles、clientX、clientY等属性,这些属性是事件对象本身自带的,浏览器方便我们 *** 作帮我们绑定上去的。

说到这,那事件对象有什么用呢?其实前面说了,它能帮我们获取键盘,鼠标的状态,进一步想,那我们可以通过事件对象来做一些特殊功能了,比如说 鼠标点击拖动盒子物体、键盘某个按键按下执行搜索功能,这些都需要借助event事件。

了解了一些event事件的知识,那现在主流浏览器这么多,我们也要做一些兼容性 *** 作。

event对象浏览器兼容处理

事件绑定,顾名思义就是把事件绑定在对象身上。那我这里就先绑定个鼠标点击事件和键盘按下事件来展示一下。

看了上面两个例子,应该知道了,通过 XXX *** 作 = function(){ } 就可以给XXX事件绑定功能了。

其实这个 *** 作 是一种 API

什么是事件源?事件源有什么用?

事件源:发生事件的对象,一般指某一具体的组件,比如:用户点击某Button,则此Button即为事件源。又比如: ul 里有很多 li 标签,而我点击了 li 标签,这个即为事件源。

事件源作用:能进行事件委托,处理冒泡事件,提高性能。

事件源兼容写法:

什么是事件委托?有什么用?

事件委托:把原本需要绑定在子元素的响应事件(click、keydown)委托给父元素,让父元素担当事件监听的职务。事件委托的原理是DOM元素的事件冒泡。

作用:

1只在内存中开辟了一块空间,节省资源同时减少了dom *** 作,提高性能

2 对于新添加的元素也会有之前的事件

这里有一篇大牛写的事件委托的详解 js中的事件委托或是事件代理详解 来自博客园的 凌云之翼

为什么要有事件捕获和事件冒泡?

在主观意义上,我点击哪个元素,就只有哪个元素执行事件,这是合理的。

但是呢,在DOM树中,元素和元素的容器是一体的,就像人的四肢和人是一起的一样。所以触发了元素的事件,容器也势必是触发了事件的,就像你触摸了某个人的手臂,势必表示触摸了这个人一样。

为了表示这种“一体”的关系,于是有了事件捕获和事件冒泡。

那么什么是捕获、什么是冒泡?

为了实现一体关系,有两种触发事件的顺序。一种是由上至下,一种是由下至上,它们分别是捕获和冒泡。

为了更好地理解,下面使用现实例子做类比。

冒泡的例子:

在这个例子中,针直接作用到人的手臂,手臂对被刺这个事件进行响应,发送神经信号。然后,大脑接收这个信号,产生痛觉。这样从低级神经到高级神经的传递顺序叫冒泡。也就是:

然而,对于捕获,并不符合这种“一体”关系,反而像是为了实现这种一体关系而建立的机制。这里使用的是层层询问的方式。

其中,不管捕获还是冒泡,(直接被作用元素)目标元素响应事件的过程叫目标过程。

现代浏览器都采用先捕获后冒泡的顺序,而在目标阶段,如果对同样的触发源,有多个响应事件的话,按事件添加的先后顺序执行。

结果:

然后,经过将child的on绑定、捕获、冒泡响应事件调换顺序,都可以发现在目标过程并不符合先捕获后冒泡的约束,而是谁先绑定,谁先触发。当然,这也是因为它是一个单独的过程,独立于捕获和冒泡过程的原因,因为压根没关系嘛。

其实事件委托就是,不在目标阶段对目标事件进行相应,改为放到捕获和冒泡阶段。而由于捕获和冒泡阶段发生在目标元素的上层元素 (目标阶段的捕获和冒泡响应事件个人认为不应该划分到捕获和冒泡阶段比较好) ,就相当于把事件响应交给了上层元素,这就是事件委托,就这么简单。

像上面这个例子,ul是被li撑开的,所以,点击ul势必会点击到li。这样,把li的响应 *** 作给ul是可以考虑的,这就是事件委托。

以上就是关于js 事件委托了 之后,怎么知道我点击可第几个li 或许下标全部的内容,包括:js 事件委托了 之后,怎么知道我点击可第几个li 或许下标、C1FlexGrid 如何得到选中行的索引、event对象,事件绑定,事件源,事件委托等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9438057.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存