如何减少 onmouseover 和 onmouseoutt 的使用
How do I reduce the use of onmouseover and onmouseoutt?
在我的页面上,当鼠标经过时,我想突出显示许多部分。 这可以使用onmouseover
和onmouseout
来实现。 我有 100 多个部分,我认为在每个部分调用方法并不是很有效。 这样。
<li id="1" onmouseover="h(1)" onmouseout="h(1)">
<label>1</label>
</li>
<li id="2" onmouseover="h(2)" onmouseout="h(2)">
<label>2</label>
</li>
<li id="3" onmouseover="h(3)" onmouseout="h(3)">
do something
</li>
...
<li id="4" onmouseover="h(4)" onmouseout="h(4)">
do something
</li>
我希望在Javascript中得到这个答案,因为我不知道jQuery。
你追求的是事件委派。即将事件处理程序绑定到公共祖先。在您的情况下,它可能是类似的:
// assuming `ul` refers to the list element that contains those `li` elements
ul.onmouseover = function(event) {
// some cross-browser handling (IE)
event = event || window.event;
var target = event.target || event.srcElement;
// if the event was triggered on a `li` element
if(target.nodeName === 'LI') {
h(this.id); // do the stuff
}
};
演示
这只是一个例子,您必须根据需要进行调整,例如,如果li
元素包含元素本身,则情况会有所不同。
如果您想了解有关事件处理的更多信息,我建议您阅读有关 quirksmode.org 的精彩文章。
也就是说,jQuery将使这变得容易得多,还因为它模拟了来自IE的mouseenter
和mouseleave
事件,这更有用,并处理了跨浏览器问题。
例如:
$('#listId').on('mouseenter', 'li', function() {
h(this.id);
});
$('#listId').on('mouseleave', 'li', function() {
h(this.id);
});
如果你经常使用事件处理和/或 DOM 操作,那么 jQuery 确实值得推荐。
<li id="1" class="btn">
do something
</li>
.js:
<script type="text/javascript">
window.onload = function(){
var allBtns = document.getElementsByClassName("btn");
for (var i = 0; i < allBtns.length; i++) {
allBtns[i].onmouseover = function(){h(this.id)};
allBtns[i].onmouseout = function(){h(this.id)};
}
}
</script>
或:
<ul class="myBTNS">
<li id="1">do something</li>
<li id="2">do something</li>
<ul>
.js:
<script type="text/javascript">
window.onload = function() {
var btnsContainer = document.getElementsByClassName("myBTNS");
for (var i = 0; i < btnsContainer.length; i++) {
var allBtns = btnsContainer[i].getElementsByTagName("li");
for (var i = 0; i < allBtns.length; i++) {
allBtns[i].onmouseover = function() {h(this.id)};
allBtns[i].onmouseout = function() {h(this.id)};
}
}
}
</script>
非常简单的解决方案:
.HTML:对于要在鼠标放在/移出后执行操作的每个<li>
元素,分配一个类值。在这个例子中,我使用了类名' someclass
',但是你可以把它改成你觉得最适合它的任何内容。另请注意,一个元素可以有多个类。例如 <li class="someclass anotherclass"></li>
.
<ul>
<li class="someclass secondaryclass">Example</li>
<li class="someclass">Example</li>
<li class="someclass">Example</li>
<li class="someclass">Example</li>
<ul>
JavaScript:遍历类名为"someclass"的所有元素,并附加事件侦听器。在这个例子中,我减轻了'out
'和'over
'函数声明,但是看看下面的jsFiddle示例,看看它们在行动。
for(var i in document.getElementsByClassName('someclass'))
{
document.getElementsByClassName('someclass')[i].addEventListener('mouseover', over ,false);
document.getElementsByClassName('someclass')[i].addEventListener('mouseout', out ,false);
}
http://jsfiddle.net/eVs9L/<-- 查看浏览器控制台以查看鼠标悬停/悬停功能输出的输出。
jQuery方法:
$('.someclass').hover(function(){
//Mouse Over Code goes here...
}, function(){
//Mouse Out code goes here...
});
<</div>
div class="answers"> 是的,答案是使用 jQuery .each。
链接: http://api.jquery.com/each/
您可以使用 document.getElementsByTagName 获取所有 li 元素并将它们存储在数组中。 然后,只需循环遍历数组并为 onmouseover 和 onmouseout 事件分配一个函数即可。
var elems = document.getElementsByTagName('li');
for (var i = 0; i < elems.length; i++) {
elems[i].onmouseover = function () {
this.innerHTML = "over";
this.style.background = "yellow";
};
elems[i].onmouseout = function () {
this.innerHTML = "out";
this.style.background = "white";
};
}
这是jsFiddle演示的链接。 我让函数更改文本和 bg 颜色只是为了演示代码实际上正在做某事。
- 改进 jQuery 以减少重复
- 如何通过ajax增加/减少PHP变量值并重新加载函数
- 设置随机数,然后每5秒随机减少一次,直到达到0(javascript)
- 如何减少在移动网络应用程序上播放声音的延迟
- “createImageData()”和“new ImageData(()”有何不同
- 如何减少if语句的数量
- 如何在这个JavaScript中减少代码重复
- 根据元素高度和宽度的百分比变化增加或减少字体大小
- .在没有蓄能器的情况下减少
- Grunt手表在纠错后运行不减少
- 引导时间选择器在增加或减少小时和分钟的同时获取 NaN
- 函数比javascript中的步进器增加/减少更多
- 如果一个手风琴发出咔嗒声,如何最大限度地减少其他手风琴
- 如何通过分配单个变量来减少此脚本中的链接数
- 如何减少骨干路由器中的重复代码
- 在linux上使用软件包减少grunt的大小.文件路径对Jenkins来说太长
- 减少JSON数据
- JavaScript 将“memory”返回为 0,即使我增加或减少它的值
- 重新编译 JSON 数据以减少行数
- 如何减少 onmouseover 和 onmouseoutt 的使用