-
事件对象指的是event对象
$(document).ready(function(){
$('input').on('click',function(e){
alert('点击时候是否同时按下ctrl键'+e.ctrlKey);
});
$("input").on('click',123,function(e){
alert('事件类型字符串'+e.type);
alert('获取绑定事件的dom元素(点了哪个就是哪个)'+e.target);
alert('获取监听元素的dom，绑定哪个就是哪个'+e.currentTarget);
alert('临近的dom元素(mouseover调用)'+e.relatedTarget);
alert('获取额外的数据'+e.data);
alert('获取时间戳'+e.timeStamp);
alert('获取鼠标的左中右键123,键盘按键'+e.which);
});
$(document).on('click',function(e){
alert('pageX'+e.pageX+'screenX'+e.screenX);
});
//获取上一个相同事件的返回值e.result
$('input').on('click',function(e){
return 123;
});
$('input').on('click',function(e){
alert(e.result);
});
});
2.冒泡行为
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$('input').on('click',function(e){
alert('input');
});
$('div').on('click',function(e){
alert('div');
});
$(document).on('click',function(e){
alert('document');
});
});
</script>
</head>
<body>
<div style="background:red;display:block;height:200px;width:200px;">
<input type="button" value="按钮"/>
</div>
</body>
</html>
效果，点击document,弹出document,点击div,弹出div,document,点击input,弹出，input,div,document
阻止冒泡行为：
e.stopPropagation();
3.默认行为
-
超链接跳转2.表单提交
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
//阻止超链接跳转
$('a').on('click',function(e){
e.preventDefault();
alert('a');
});
//阻止表单提交1
$('input').on('click',function(e){
e.preventDefault();
});
//阻止表单提交2
$('form').submit(function(e){
e.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交"/>
</form>
</body>
</html>
可以使用return false,同时阻止默认行为和冒泡行为。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
