整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、js事件的三種方式：
1.只是簡單地綁定一個事件可以直接寫在行內，點擊執(zhí)行一個函數，例如 <button onclick="alert('點我啊!')">點我啊</button>
2.也可以設置一個id 例如<button id="btn">點我啊</button><br>
$('#btn').click(function(){
})
3.還可以寫成這種格式，點擊執(zhí)行函數，但是函數寫在外面，例如 btn1.onclick=demo; function demo(){ alert('打你干嗎?'); }
其實以上三種本質應該是一種，只是形式不一樣
二、對于多事件的綁定，常用的就是on() 和 bind(),介紹一下它們的區(qū)別:
on的基本語法：on(events,[selector],[data],fn)
events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發(fā)。
data:當一個事件(events)被觸發(fā)時要傳遞event.data(事件的屬性或數據)給事件處理函數（fn）。
fn:該事件被觸發(fā)時執(zhí)行的事件函數。 false 值也可以做一個函數的簡寫，返回false。
注：如果只是一個簡單的事件綁定如 $('button').on('click',function(){}); 與bind()無二樣，與以上的幾種方式也沒有太多的區(qū)別
三、多個事件綁定到一個函數，或多個事件綁定到多個函數，就需要用到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的第二個參數可以阻止一些情況下的冒泡，原理簡單說就是用選擇器來精確到匹配到你想執(zhí)行函數的那個元素,而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>霍格沃茲的測試管理班是專門面向測試與質量管理人員的一門課程，通過提升從業(yè)人員的團隊管理、項目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領團隊、項目以及公司獲得更快的成長。提供 1v1 私教指導，BAT 級別的測試管理大咖量身打造職業(yè)規(guī)劃。
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小時內與您取得聯(lián)系。
