六角學院｜事件event
event效果:
Mouse Events：滑鼠移入移出、點擊時的效果Keyboard Events.
Frame/Object Events：伸縮瀏覽器,往下滑動時皆會觸發.
Form Events：表單輸入/離開至文字欄位.
等等 ....
onclick(舊式)
-較容易被入侵或放惡意碼
<HTML>
<body>
<input type="button" value="點擊" class="btn">
<script src="js/all84.js"></script>
</body>
<JS>
var el = document.querySelector('.btn');
el.onclick = function(){
alert("hello");
}
addEventListener(新式)
-又名監聽
-打法: el.addEventListener ( 'click', function(e) { }, false )
//選擇事件,代入匿名function, false
<HTML>
<body>
<input type="button" value="點擊" class="btn">
<script src="js/all86.js"></script>
</body>
<JS>
var el = document.querySelector('.btn');
el.addEventListener('click',function(e){
alert('hello');
},false)
*兩者比較:
onclick:
-侷限:若出現一個以上,後者付前者,只會出現一個.靈活性較低一點.
addEventListener:
-為了彌補onclick特性年前創建,幾個事件可以同時綁定.
False(Event Bubbling)事件氣泡、True(Event Capturing) 事件捕捉 差異
-False(Event Bubbling)事件氣泡:從指定元素往外層.
True(Event Capturing) 事件捕捉:從最外層元素找到指定元素
stopPropagation - 中止冒泡事件
<HTML>
<body class= "body">
<div class="box"></div>
<script src="js/all89.js"></script>
</body>
<JS>
var el = document.querySelector('.box');
el.addEventListener('click',function(e){
e.stopPropagation();
alert('box');
console.log('box');
},false);
var elBody = document.querySelector('.body');
elBody.addEventListener('click', function () {
alert('你沒有點到box');
console.log('你沒有點到box');
}, false);
preventDefault - 取消預設觸發行為
-取消元素默認行為
-原本的話,點擊連結會跳到指定網頁
<HTML>
<body class="body">
<a class="link" href="http://www.google.com.tw" style="margin-top:1800px;display:block">menu icon</a>
<script src="js/all90a.js"></script>
</body>
<JS>
var el = document.querySelector('.link');
el.addEventListener('click',function(e){
//取消元素默認行為
//原本的話,點擊連結會跳到指定網頁
e.preventDefault();
console.log('test')
})
*兩者比較:
stopPropagation - 中止冒泡事件
如果重疊的話,只執行自己就好.
preventDefault - 取消預設觸發行為
取消默認行為.
focus&blur
focus:所在焦點(滑鼠點擊到裡面)
blur:離開焦點
function count(){
var hamPrice = 50;
var cokePrice = 20;
var hamNum = parseInt(document.getElementById('hamNumId').value)*hamPrice;
var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice;
document.getElementById('totalId').textContent = hamNum+cokeNum
}
function checkContent(e){
var str = e.target.value;
if(str==''){
alert('此欄位不可為空')
}
}
var el = document.getElementById('countId');
el.addEventListener('click',count,false)
var ham = document.getElementById('hamNumId');
ham.addEventListener('blur',checkContent,false);
var coke = document.getElementById('cokeNumId');
coke.addEventListener('blur', checkContent, false);
*parseInt 函式:
mousemove:移動到指定區域立刻產生動畫效果.
用多個小方框做出電擊棒效果:
＊使用keyframe與animation
參閱:
-@keyframes(關鍵影格)
-iteration-count如果要無限多次可用infinite
-@-webkit-keyframes fontbulger {}文字跳動(待確認)http://www.aichengxu.com/htmlcss/2345773.htm
網頁座標 - 了解 screen、page、client 箇中差異
page:整個網頁的高寬度(網頁裡面整個頁面)
client:瀏覽器視窗的高寬度(當下瀏覽器窗口的高度跟寬度)
screen:整個電腦的螢幕解析度多少
评论
发表评论