獲得div中滾動條的距離
/* 滾動條 滾動事件 */
? ? ? ? /* document.onscroll=function(){
? ? ? ? ? ? console.log(document.documentElement.scrollTop);
? ? ? ? ? ? img.style.top = parseInt(top2) + parseInt(document.documentElement.scrollTop)+'px'
? ? ? ? } */
? ? ? ? let div1 = document.querySelector('#div1');
? ? ? ? ? ? div1.onscroll=function(){
? ? ? ? ? ? ? ? console.log(div1.scrollTop);
? ? ? ? ? ? ? ? //console.log(div1.scrollLeft);
? ? ? ? ? ? }
鍵盤事件
?用戶名: <input type="text" id="t">
? ? <script>
? ? ? ? let t = document.getElementById('t');
? ? ? ? t.onkeydown = function (e) {
? ? ? ? ? ? let eobj = e || event;
? ? ? ? ? ? /* e代表事件原對象 ?*/
? ? ? ? ? ? console.log(e.keyCode);
? ? ? ? ? ? /* 在輸入框中輸入字符 按下回車的時候 把輸入的字 alert出來 */
? ? ? ? ? ? if (eobj.keyCode == 13) {
? ? ? ? ? ? ? ? alert(t.value)
? ? ? ? ? ? ? ? /* alert(eobj.target.value) */
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /* 鍵盤按下的時候觸發(fā) */
? ? ? ? /* t.onkeydown = function () {
? ? ? ? ? ? console.log('鍵盤我按下了');
? ? ? ? } */
? ? ? ? /* 連續(xù)敲擊的時候觸發(fā) */
? ? ? ? /* ?t.onkeypress = function () {
? ? ? ? ? ? ?console.log('連續(xù)按下鍵盤并抬起的時候觸發(fā)');
? ? ? ? ?} */
? ? ? ? /* 鍵盤抬起的時候觸發(fā) */
? ? ? ? /* ?t.onkeyup = function () {
? ? ? ? ? ? ?console.log('鍵盤我抬起了');
? ? ? ? ?} */
? ? ? ? /* 順序 onkeydown > onkeypress > onkeyup */
? ? </script>
UI事件
? /* 當整個頁面被加載完成(包括img圖片也完全加載完畢)的時候調(diào)用 */
? ? ? ? window.onload = function () {
? ? ? ? ? ? let div1 = document.getElementById('div1');
? ? ? ? ? ? div1.onclick=function(){
? ? ? ? ? ? ? ? alert(div1.innerHTML)
? ? ? ? ? ? }
? ? ? ? ? ? window.onresize=function(){
? ? ? ? ? ? console.log('頁面尺寸改變');
? ? ? ? ? ? div1.style.backgroundColor='red'
? ? ? ? }
? ? ? ? }
鼠標點擊位置
<style>
? ? ? ? #div1{
? ? ? ? ? ? margin: 50px;
? ? ? ? ? ? background-color: aqua;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="div1"></div>
? ? <script>
? ? ? ? let div1=document.getElementById('div1');
? ? ? ? div1.onclick=function(e){
? ? ? ? ? ? /* 鼠標在文檔的x軸的位置 */
? ? ? ? ? ? console.log(e.clientX);
? ? ? ? ? ? console.log(e.clientY);
? ? ? ? }
? ? </script>
</body>
阻止事件練習
?let div=document.querySelector('div');
? ? ? ? let li=document.getElementsByTagName('li');
? ? ? ? console.log(li);
? ? ? ? document.oncontextmenu=function(e){
? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? div.style.display='block';
? ? ? ? ? ? div.style.position='absolute';
? ? ? ? ? ? div.style.left=e.clientX+'px';
? ? ? ? ? ? div.style.top=e.clientY+'px';
? ? ? ? }
