1.执行顺序
<body>
<input type="button" value="click me" id="mybutton"/>
</body>
<script type="text/javascript">
/*运行顺序：jquery 1>jquery 2>window onload 2*/
// 传统 onload 函数(加载完毕页面所有东西)
window.onload = function(){
alert("window onload 1");
};
// 覆盖之前的一个事件
window.onload = function(){
alert("window onload 2");
};
//dom结构构建完毕，就执行
$(function(){
alert("jquery 1");
});
$(document).ready(function(){
alert("jquery 2");
});
/*运行顺序：b c d*/
$(function(){
document.getElementById("mybutton").onclick = function(){
alert("dom a");
};
// 覆盖之前事件
document.getElementById("mybutton").onclick = function(){
alert("dom b");
};
// jquery 方式注册
$("#mybutton").click(function(){
alert("dom c");
});
$("#mybutton").click(function(){
alert("dom d");
});
});
</script>
2.事件绑定
<body>
<!-- 事件绑定 -->
<input type="button" value="click me" id="mybutton"/>
<hr/>
<!-- 事件委派 -->
<input type="button" value="addlink" id="addlink" />
<div id="linklist">
</div>
</body>
<script type="text/javascript">
$(function(){
// jquery 方式绑定事件
// 方式一
$("#mybutton").click(function(){
alert(1);
});
// 方式二
$("#mybutton").bind("click",function(){
alert(2);
});
// 解除绑定 --- 解除所有click 绑定事件
$("#mybutton").unbind("click");
// 事件委派，对“后”添加的元素，实时进行绑定
$("a").live("click",function(){
alert("这是一个超链接");
});
$("#addlink").click(function(){
// 在linklist 添加一个新的超链接
$("#linklist").append("<a href='#'>超链接</a> ");
});
// 解除委派
$("a").die("click");//alert失效
});
</script>
3.事件阻止
<body>
<div>zzz<a href="del?id=1" id="dellink">删除</a></div>
<hr/>
<p id="myp"><a id="mya" href="javascript:void(0)">我要学习</a></p>
</body>
<script type="text/javascript">
$(function(){
// 传统js 确认删除代码
/*
document.getElementById("dellink").onclick = function(event){
// 确认框
var isConfirm = window.confirm("真的要删除吗？");
if(!isConfirm){
// 用户选择了取消
if(event&&event.preventDefault){
// 火狐
event.preventDefault();// 只能用于火狐
}else{
// IE浏览器
return false;
}
}
};
*/
// jquery 默认事件阻止
$("#dellink").click(function(event){
var isConfirm = window.confirm("真的要删除吗？");
if(!isConfirm){
event.preventDefault(); // 浏览器兼容
}
});
// 注册事件
$("#myp").click(function(){
alert("父元素p");
});
$("#mya").click(function(event){
alert("子元素a");
// 阻止向父元素传播
event.stopPropagation();//否则p也会执行
});
});
</script>
4.单次事件，以及trigger
<body>
<!-- 事件绑定 -->
<input type="button" value="click me" id="mybutton"/>
<!-- 自动触发 -->
<input type="button" value="button1" id="button1" />
<input type="button" value="button2" id="button2" />
<p>点击</p>
</body>
<script type="text/javascript">
$(function(){
// 绑定一次性事件，只能使用一次
$("#mybutton").one("click",function(){
alert(1);
});
// 自动触发
$("#button1").click(function(){
alert("加载服务器一组数据，进行操作....");
});
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("#button2").click(function(){
// 点击按钮2，触发按钮1 的点击事件
$("#button1").trigger('click');
//$("p").trigger("myEvent", ["Hello","World!"]);
});
});
</script>
5.鼠标事件
<body>
<img src="${pageContext.request.contextPath }/pic/1.jpg"
width="150" height="100"/>
</body>
<script type="text/javascript">
$(function(){
// 注册事件切换
$("img").hover(function(){
// 悬停
$(this).attr("width",450);
$(this).attr("height",300);
}, function(){
// 移开
$(this).attr("width",150);
$(this).attr("height",100);
});
// 点击切换图片
$("img").toggle(function(){
$(this).attr("src","${pageContext.request.contextPath }/pic/2.jpg");
}, function(){
$(this).attr("src","${pageContext.request.contextPath }/pic/3.jpg");
}, function(){
$(this).attr("src","${pageContext.request.contextPath }/pic/4.jpg");
}, function(){
$(this).attr("src","${pageContext.request.contextPath }/pic/1.jpg");
});
});
</script>
分享到：
相关推荐
《jQuery Event Drag 插件深度解析与应用实践》 在Web开发中，用户交互体验的提升是关键之一，其中拖放（Drag and Drop）功能尤为常见，如文件管理、元素布局等。jQuery作为广泛使用的JavaScript库，提供了丰富的...
新的jQuery Event Inspector面板。 舒适地检查您的jQuery代码，并查看其回调事件列表。 此插件在“元素”面板上添加了一个新的侧边栏-jQuery Callback Events侧边栏-显示了所选元素的事件处理程序，包括正在发生或...
对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法。... Jquery提供了一个 event的包裹，这个相对于其它的lib提供的有点简单，但是足够使用。 代码如下: //对事件进行包裹。 fix : function(e
《jQuery Event Drop 2.0：深入理解与应用》 jQuery Event Drop 2.0 是一个专门用于处理拖放事件的插件，它为开发者提供了更丰富的交互功能，使得在网页上实现动态拖放操作变得更为简单。在这个压缩包文件"jquery....
jQuery Event Logger是一个书签，可在触发时实时记录jQuery绑定的事件。 它使查看每个事件正在执行的处理程序的可视化变得容易，并可以追溯其源代码。 用法 创建具有以下内容的书签： [removed](function(){...
新的jQuery Event Inspector面板。 舒适地检查您的jQuery代码，并查看其回调事件列表。 此插件在“元素”面板上添加了一个新的侧边栏-jQuery Callback Events侧边栏-显示了所选元素的事件处理程序，包括正在发生或...
《jQuery.event.drag-2.0：拖放事件的深度解析》 在JavaScript的世界里，jQuery库以其简洁的API和强大的功能深受开发者喜爱。而在jQuery的众多插件中，`jquery.event.drag-2.0`是一个专门处理拖放事件的插件，它极...
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为...通过阅读和实践提供的jQueryEvent压缩包中的源码，可以更深入地理解这个过程。
JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它，但有些时候它还是它还是有作用的。如获知触发时用户的环境（是否按了shift etc）。每个浏览器对event都有...
为了解决不同浏览器之间的兼容性问题，jQuery提供了一个非常有用的工具函数$.event.fix，它能够将不同浏览器原生的事件对象转换为一个统一的事件对象，从而允许开发者使用统一的方式处理各种浏览器中的事件。...
var event = new jQuery.Event("demo-trigger"); event.extra = { name:'Andrew', age:'23', job:'FrontEndDev' }; $('#demo').trigger(event); }); ``` 以上两种方法都是有效的方式，用于在jQuery事件处理...
jquery-event-key 返回 键盘事件触发时对应的按键值 ###使用方法 $("#test").onkeydown(function(event){ var realKey = $.realKey(event); console.log(realKey); });
在jQuery中，`.event.fix()`方法是一个非常重要的工具，它能够将不同浏览器的原生事件对象转换成jQuery封装的统一的事件对象。当你使用jQuery处理事件时（例如使用`.click()`，`.mouseover()`等方法绑定的事件），...
《jQuery Mobile Event 深入解析》 在Web开发领域，jQuery Mobile是一个强大的框架，它专为触摸设备设计，提供了一套完整的用户界面组件和事件处理机制。标题"jquery.mobile.event"表明我们将深入探讨jQuery Mobile...
另外，在jQuery 1.7中移除了event.layerX和event.layerY这两个属性，以及jQuery.isNaN()和jQuery.event.proxy()方法，分别用event.originalEvent.layerX and event.originalEvent.layerY、jQuery.isNumeric()、...
《jQuery Migrate 3.4 版本详解》 jQuery Migrate 是一个插件，它的主要目的是帮助开发者平滑地过渡到较新版本的 jQuery，解决老版本代码在新版本中可能遇到的兼容性问题。在jQuery Migrate 3.4.0版本中，我们看到...
`$(element).click(function(){...})`用于绑定点击事件，`$(element).on('event', function(){...})`则支持多种事件，如`'mouseover'`, `'mouseout'`, `'keydown'`等。同时，`.off()`用于解除绑定。 ### 四、动画...
**jQuery InputEvent 插件详解** 在Web开发中，JavaScript库jQuery因其易用性和广泛的兼容性而备受青睐。然而，不同的浏览器对某些事件的支持程度各异，`oninput`事件便是其中之一。`oninput`事件在用户输入内容时...