jQuery如何重新绑定已经绑定的事件?虽然我们现在推荐行为分离,渐进增强,但在很多遗留系统里还是存在很多这样的代码
1 |
<input type="button" value="ClickMe" id="btn1" onclick="foo()" /> |
就是直接在DOM元素上绑定事件
这样做有很多缺点
1.代码高度耦合
2.增加HTML大小
3.书写不了逻辑性很强的代码
这种绑定事件的方法太丑陋了,我们看看jquery等框架是如何绑定事件的?
1 |
$("#btn1").click(function(){ |
2 |
foo(); |
3 |
}); |
当然在新系统里面我们可以直接绑定事件,但对于这种直接在elments上通过onclick(),onchange()来绑定事件的遗留的系统怎么办？
来看jquery如何巧妙的实现替换elements已绑定事件
1 |
("#btn1").unbind('click').removeAttr('onclick').click(function() { |
2 |
alert('The method has invoked by Jquery.'); |
3 |
}); |
我们分析下核心代码
我们先通过jQuery的unbind()方法解绑click事件,然后removeAttr(“onclick”),
就能把onclick属性给去掉了
然后通过jQuery的bind()或者直接click()来重新绑定我们的click事件.
相关推荐
其中`document`可以替换为任何包含目标元素的父级元素，`#dynamic-element-id`是目标元素的选择器，`function() {}`是事件触发时执行的回调函数。 5. 示例代码分析：文章中提供的代码展示了如何为动态生成的select...
例如，`$("#element").bind("click mouseover", function() {...})`将为指定元素同时绑定点击和鼠标悬停事件。当这个元素被点击或鼠标悬停时，关联的函数就会执行。这种方法使得我们可以在一个处理函数中处理多个...
本文将深入探讨如何使用jQuery来替换元素上的事件。 首先，我们来看一下提供的示例代码： ```html ; charset=utf-8" http-equiv="Content-Type" /> <title>TestPage ...
### Jquery节点插入、...综上所述，JQuery提供的这些插入、复制和替换的方法为开发者提供了极大的灵活性，使得DOM操作变得更加简单高效。无论是创建新的页面布局还是动态更新现有内容，这些方法都是必不可少的工具。
2. **事件绑定**：使用`$(element).on('event', function() {...})`可以绑定事件监听器，如`click`事件，当用户点击时触发图片切换。 3. **动画效果**：jQuery的`.fadeIn()`和`.fadeOut()`方法用于淡入淡出效果，`....
当一个可拖动元素被放置到可接收区域时，会触发一系列事件，如`drop`事件，开发者可以在此事件中处理逻辑，比如替换元素。例如： ```javascript $('#target').droppable({ drop: function(event, ui) { $(this)....
3. live()方法通过事件冒泡的方式绑定事件，它将事件绑定到document的DOM节点上，而非直接绑定在元素上。live()适用于动态添加到DOM中的元素，因为即使这些元素是在事件绑定之后添加的，它们依然可以响应事件。不过...
- `triggerHandler(eventObj)`：立即触发一个或多个绑定到匹配元素上的事件处理器，但不会改变元素的状态。 - **解除绑定**： - `off(event, [selector], [handler])`：移除一个或多个绑定到匹配元素上的事件...
事件委托允许我们在父元素上绑定事件，而不是在每个子元素上单独绑定，这样即使子元素被替换，事件处理仍然有效。 ```javascript $(document).on('click', '.ajax-generated', function() { // 你的事件处理代码 }...
2. **链式调用（Chaining）**：jQuery对象支持链式调用，一次操作后可以直接进行下一次操作，如`$("#element").hide().fadeIn()`，先隐藏元素，再淡入显示。 3. **DOM操作（DOM Manipulation）**：jQuery提供了丰富...
3. **事件处理**：jQuery通过`.on()`方法绑定事件，如`$("#element").on("click", function() {...})`用于在元素被点击时执行回调函数。此外，还有`trigger()`方法可以手动触发事件。 4. **动画效果**：jQuery的`...
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 <script type="text/javascript" src="/jquery/jquery.js"> $...
</p>")`将替换ID为"element"的元素内的内容。 3. **事件处理（Event Handling）**：jQuery简化了事件绑定和解绑的过程。`$("#button").click(function() {...})`会为ID为"button"的元素添加点击事件。`off()`可以...
在这个例子中，特效是通过jQuery实现的，当用户将鼠标移动到某个元素（如图片或按钮）上时，会出现上下切换的动作，同时伴随着图片和文字的互相替换。这可能是一种常见的轮播图或者信息展示方式，通过这种动态效果，...
例如，`$(element).append(content)`在元素内部追加内容，`$(element).remove()`删除元素，`$(element).replaceWith(newContent)`替换元素，以及`$(selector).find(target)`在选定元素集中查找子元素。 3. **事件...
jQuery简化了事件绑定和解绑。使用`$(selector).on(eventName, handler)`可绑定事件，如`$("#myButton").on("click", function() {...})`监听点击事件。`off()`方法用于解绑事件，`$(selector).off(eventName, ...
例如，`.live()`方法被替换为`.on()`，因为它提供了更好的性能和更灵活的事件绑定。 8. **向后兼容性**：虽然1.9.1版本移除了部分旧API，但jQuery团队也同时发布了1.8.x版本以保持对旧代码的兼容。这允许开发者逐步...
3. **事件处理**：虽然比jQuery的事件系统简单，Selector仍然支持基本的事件绑定和解绑。例如，`Selector('#element').on('click', function() {})`用于绑定点击事件，`Selector('#element').off('click')`则可以...
6. **链式操作**：jQuery的一个显著特点是链式调用，允许连续执行多个方法在一个选择集上，如`$("#element").css("color", "red").slideUp(500);`。 7. **插件扩展**：jQuery生态系统庞大，拥有无数插件，如轮播图...