JavaScript思维导图——Day 16(事件)

忘是亡心i 2023-07-07 11:17 76阅读 0赞

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <!--
  8. <div style="width: 100px;height: 100px;background-color: red;" onclick="console.log('a') "></div> -->
  9. <div style="width: 100px; height: 100px; background-color: red;"></div>
  10. <ul>
  11. <li>1</li>
  12. <li>2</li>
  13. <li>3</li>
  14. </ul>
  15. <script type="text/javascript">
  16. var div = document.getElementsByTagName('div')[0];
  17. // div.onclick = function () {
  18. // this.style.backgroundColor = 'green';
  19. // console.log('a');
  20. // this.onclick = null;
  21. // }
  22. // div.onclick = null;
  23. div.addEventListener('click',test,false);
  24. div.removeEventListener('click',test,false);
  25. function test() {
  26. console.log('a');
  27. }
  28. // div.addEventListener('click',function () {
  29. // console.log(this);//指向dom元素本身
  30. // },false);
  31. //IE独用的
  32. // div.attachEvent('onclick',function () {
  33. // console.log('a');
  34. // })
  35. var li = document.getElementsByTagName('li');
  36. var len = li.length;
  37. for(var i = 0; i < len; i ++){
  38. //事件出现在循环里面一定要考虑闭包
  39. (function (i) {
  40. li[i].addEventListener('click',function () {
  41. console.log(i);
  42. },false);
  43. }(i))
  44. }
  45. </script>
  46. </body>
  47. </html>
  48. <!DOCTYPE html>
  49. <html lang="en">
  50. <head>
  51. <meta charset="UTF-8">
  52. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  53. <title>Document</title>
  54. <style>
  55. .wrapper{
  56. width: 300px;
  57. height: 300px;
  58. background-color: red;
  59. }
  60. .content{
  61. width: 200px;
  62. height: 200px;
  63. background-color: green;
  64. }
  65. .box{
  66. width: 100px;
  67. height: 100px;
  68. background-color: aqua;
  69. }
  70. </style>
  71. </head>
  72. <body>
  73. <!-- 取消默认事件 -->
  74. <a href="javascript:void(false)">4242424</a>
  75. <div class="wrapper">
  76. <div class="content">
  77. <div class="box"></div>
  78. </div>
  79. </div>
  80. <script>
  81. var wrapper = document.getElementsByClassName('wrapper')[0];
  82. var content = document.getElementsByClassName('content')[0];
  83. var box = document.getElementsByClassName('box')[0];
  84. //事件冒泡 结构上 的 由子元素到父元素上的
  85. //事件捕获 从父元素到子元素false --> true
  86. //先捕获后冒泡
  87. // wrapper.addEventListener('click', function () {
  88. // console.log('wrapper222')
  89. // }, false);
  90. // content.addEventListener('click', function () {
  91. // console.log('content222')
  92. // }, false);
  93. //事件执行的顺序谁先绑定谁先执行
  94. // box.addEventListener('click', function () {
  95. // console.log('box222')
  96. // }, false);
  97. // wrapper.addEventListener('click', function () {
  98. // console.log('wrapper')
  99. // }, true);
  100. // content.addEventListener('click', function () {
  101. // console.log('content')
  102. // }, true);
  103. // box.addEventListener('click', function () {
  104. // console.log('box')
  105. // }, true);
  106. //事件源对象
  107. box.onclick = function (e) {
  108. var event = e || window.event;
  109. var target = event.target || event.srcElement;
  110. console.log(target);
  111. console.log(event);
  112. }
  113. document.onclick = function () {
  114. console.log('你闲的啊');
  115. }
  116. wrapper.onclick = function (e) {
  117. this.style.background = 'green';
  118. // 取消冒泡事件的两种方式 e为事件对象
  119. // e.stopPropagation();
  120. e.cancelBubble = true;
  121. }
  122. //取消默认事件
  123. document.oncontextmenu = function (e) {
  124. console.log('a');
  125. // e.returnValue = false;
  126. // e.preventDefault();
  127. // return false;
  128. }
  129. //取消a标签的默认事件
  130. var a = document.getElementsByTagName('a')[0];
  131. a.onclick = function () {
  132. // return false;
  133. }
  134. </script>
  135. </body>
  136. </html>

发表评论

表情:
评论列表 (有 0 条评论,76人围观)

还没有评论,来说两句吧...

相关阅读

    相关 javascript思维

            最近我把一本关于Javascript的书看了一遍,书名叫《JavaScript基础教程》-莫振杰写的。个人觉得很适合Javascript初学者看。里面的内容比较