整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、js事件的三种方式：
1.只是简单地绑定一个事件可以直接写在行内，点击执行一个函数，例如 <button onclick="alert('点我啊!')">点我啊</button>
2.也可以设置一个id 例如<button id="btn">点我啊</button><br>
$('#btn').click(function(){
})
3.还可以写成这种格式，点击执行函数，但是函数写在外面，例如 btn1.onclick=demo; function demo(){ alert('打你干吗?'); }
其实以上三种本质应该是一种，只是形式不一样
二、对于多事件的绑定，常用的就是on() 和 bind(),介绍一下它们的区别:
on的基本语法：on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件(events)被触发时要传递event.data(事件的属性或数据)给事件处理函数（fn）。
fn:该事件被触发时执行的事件函数。 false 值也可以做一个函数的简写，返回false。
注：如果只是一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样，与以上的几种方式也没有太多的区别
三、多个事件绑定到一个函数，或多个事件绑定到多个函数，就需要用到on了：
多个事件一个函数：
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
alert("多个事件一个函数");
});
});
多个事件绑定不同的函数
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");}
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
on的第二个参数可以阻止一些情况下的冒泡，原理简单说就是用选择器来精确到匹配到你想执行函数的那个元素,而bind()就没有这个参数，因此在使用bind()时很可能产生冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><ul>
<li></li>
<li></li>
</ul>霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程，通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力，使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导，BAT 级别的测试管理大咖量身打造职业规划。
lt;!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript：window对象常用方法和事件</title>
<script type="text/javascript">
//方法=============================
window.onload=function () {//匿名方法
this.open_fix_adv();
}
//window对象的方法，因为window对象为全局对象，所以可以省略window
window.setTimeout(function () {
console.dir("5s以后输出");
}, 5000);
window.setInterval(function () {
console.dir("每隔2s输出一次");
}, 2000);
function open_adv() {
window.open("../html/01.html");
}
function open_fix_adv() {
window.open("../html/01.html", "", "height=380,width=320,left=800,top=200,toolbar=0,
scrollbars=0,location=0, status=0,menubar=0,resizable=0");
}
function fullscreen() {
window.open("../html/01.html", "", "fullscreen=1");
}
function close_adv() {
window.close();
}
//确认框
function confirm_msg() {
var flag=window.confirm("are u sure?");
console.dir(flag);
}
//事件=============================
function getonChangeVal() {
var name=document.getElementById("username").value;
var x=document.getElementsByName('username');
console.dir(x[0].value);
console.dir(name);
}
function getonKeyDown() {
var x=document.getElementById("age").value;
console.dir(x);
}
function getonMouseOver() {
console.dir('onmouseover');
}
function printStr() {
console.dir("onload事件");
}
</script>
</head>
<body style="text-align: center;" onload="printStr()">
<input type="button" name="open1" onclick="open_adv()" value="弹出窗口"/>
<br/><br/>
<input type="button" name="open1" onclick="open_fix_adv()" value="弹出固定大小窗口，且无菜单栏等"/>
<br/><br/>
<input type="button" name="open1" onclick="confirm_msg()" value="确认窗口"/>
<br/><br/>
<input type="button" name="open1" onclick="fullscreen()" value="全屏展示"/>
<br/><br/>
<input type="button" name="open1" onclick="close_adv()" value="关闭窗口"/>
<br/><br/>
<input type="text" name="username" id="username" onchange="getonChangeVal()" value="jack"/>
<br/><br/>
<input type="text" name="age" id="age" onkeydown="getonKeyDown()" value="10"/>
<br/><br/>
<p onmousedown="getonMouseOver()">鼠标移到某元素之上</p>
</body>
</html>
*请认真填写需求信息，我们会在24小时内与您取得联系。
