-
jQuery表单事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。select事件只能用于<input>元素与<textarea>元素
查看全部 -
<body>
<h2>input、textarea与select</h2>
<div class="left">
<div class="aaron">input：
<input class="target1" type="text" value="监听input的改变" />
</div>
<div class="aaron1">select：
<select class="target2">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
<div class="aaron3">textarea：
<textarea class="target3" rows="3" cols="20">多行的文本输入控件</textarea>
</div>
</div>
输出结果：
<div id="result"></div>
<script type="text/javascript">
//监听input值的改变
$('.target1').change(function(e) {
$("#result").html(e.target.value)
});
//监听select：
$(".target2").change(function(e) {
$("#result").html(e.target.value)
})
//监听textarea：
$(".target3").change(function(e) {
$("#result").html(e.target.value)
})
</script>
</body>
查看全部 -
ocus与blur事件：不支持冒泡，focusin与focusout支持冒泡
查看全部 -
<body>
<h2>.focusin()方法</h2>
<div class="left">
<div class="aaron">
点击聚焦：<input type="text" />
</div>
</div>
<div class="right">
<div class="aaron1">
点击聚焦并传递参数：<input type="text" />
</div>
</div>
<script type="text/javascript">
//input聚焦
//给input元素增加一个边框
$("input:first").focusin(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('慕课网', fn)
}
a();
</script>
</body>
查看全部 -
当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件
查看全部 -
<body>
<h2>.hover()方法</h2>
<div class="left">
<div class="aaron1">
<p>触发hover事件</p>
</div>
</div>
<script type="text/javascript">
// hover()方法是同时绑定 mouseenter和 mouseleave事件。
// 我们可以用它来简单地应用在 鼠标在元素上行为
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
</script>
</body>
查看全部 -
jQuery鼠标事件之mouseenter与mouseleave事件
用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作
使用上非常简单，三种参数传递方式与mouseover和mouseout是一模一样的，所以这里不再重复，主要讲讲区别，下面以mouseenter为例：
mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
mouseenter事件和mouseover的区别
关键点就是：冒泡的方式处理问题
查看全部 -
mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。
查看全部 -
<body>
<h2>mouseover与mouseout事件</h2>
<h4>测试一</h4>
<button>点击：指定触发mouseover事件</button>
<script type="text/javascript">
$('h2').mouseover(function(e) {
alert('触发h2元素绑定的mouseover')
})
$("button:eq(0)").click(function(e) {
$('h2').mouseover() //指定触发绑定的事件
})
</script>
<h4>测试二</h4>
<div class="left">
<div class="aaron1">
<p>鼠标移进此区域触发mouseover事件</p>
<a>进入元素内部,mouseover事件触发次数：</a>
</div>
</div>
<script type="text/javascript">
var n = 0;
//绑定一个mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
})
</script>
<h4>测试三</h4>
<div class="right">
<div class="aaron2">
<p>鼠标移动：不同函数传递数据</p>
<a>进入元素内部,mouseover事件触发次数：</a>
</div>
</div>
<br/>
<script type="text/javascript">
var n = 0;
//不同函数传递数据
function data(e) {
$(".right a").html('mouseover事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)
}
function a() {
$(".right p:first").mouseover('data = 慕课网', data)
}
a();
</script>
</body>
查看全部 -
<body>
<h2>.mousedown()方法</h2>
<h4>测试一</h4>
<button>弹出回调中的鼠标键</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').mousedown(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").mousedown(function() {
$('p').mousedown() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<div class="test3">
<p>$('.right').mousedown(1111, set)</p>
</div>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mousedown(1111, data)
}
a();
</script>
</body>
查看全部 -
<body>
<h2>.click()方法</h2>
<h4>测试一</h4>
<button>元素绑定事件,弹出回调中的this</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").click(function() {
alert(this)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>$('button:first').click(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").click(function() {
$('p').click() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<div class="test3">
<p>$('.right').click(1111, set)</p>
</div>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").click(1111, data)
}
a();
</script>
</body>
查看全部 -
keydown/keyup理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。
查看全部 -
通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为
具体能触发submit事件的行为：
<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）
上述这些操作下，都可以截获submit事件。
这里需要特别注意：
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为 传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可
jQuery处理如下：
$("#target").submit(function(data) { return false; //阻止默认行为，提交表单 });查看全部 -
div--->是一个不能聚焦的；
所以你聚焦和失去焦点在div元素是没用的；
当你设置focusin focuout的时候
点击他的可聚焦子元素就会冒泡到div绑定的事件
当你设置focus blur时：
你点击子元素input，他不会向上传，导致div不知道有这个事件；查看全部 -
triggerHandler与trigger的用法是一样的，重点看不同之处：
triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined
查看全部
举报