【JS交互篇】事件和元素操作

于 2023-08-10 08:49:14 发布
阅读量310 收藏
点赞数
分类专栏： 前端开发知识 JavaScript 文章标签： javascript 交互 前端 DOM 事件 元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39335404/article/details/132201372
版权
本文详细介绍了JavaScript中关于事件、元素属性、事件对象、事件处理程序（包括DOM0级、DOM2级和IE事件处理程序）、事件流（冒泡与捕获）以及鼠标滚轮事件的相关知识，强调了事件委托在性能优化中的重要性。
摘要由CSDN通过智能技术生成

一、事件 和 元素相关属性

事件是用户或者浏览器自身执行的某种动作，如：click、load和mouseover等，都是事件的名字；

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

1.1 窗口或元素相关事件：

事件 描述
onload 页面或图像加载完成后触发的事件
onresize 窗口发生改变时触发的事件
onscroll 窗口滚动条滚动时触发的事件

1.2 元素相关属性

了解本专栏 订阅专栏 解锁全文 超级会员免费看
MagnumHou
关注
专栏目录
订阅专栏
【前端JS交互篇】函数、参数、返回值、闭包函数、递归函数、内存、模块化编程
前端知识分享喵
07-27 773
当声明函数后，在函数的内部（大括号函数体位置）形成自己一个独立的内部区域，这个内部区域就叫做函数作用域。函数作用域相对于整个脚本区域来讲，只是一个很小的独立区域，这个很小的区域我们通常叫它局部作用域。而整个脚本区域，我们通常叫它全局作用域。全局作用域：函数外的区域叫做全局作用域；在全局作用域中声明的变量，可以在脚本的任何位置(包裹函数内)都可以对其进行调用，这个变量我们称为全局变量。全局变量的生命周期：从文件被执行时创建（当前就是页面被加载），页面关闭后销毁。局部作用域。
JS基础事件
LiHang1234567777的博客
08-08 482
element.removeEventListener("click",logText) //logText为函数名。console.log("改变实时触发 ")console.log("outer捕获")console.log("按键抬起")console.log("获取焦点")console.log("失去焦点")console.log("改变触发")console.log("触摸开始")console.log("触摸移动")console.log("触摸结束")...
JavaScript（二）
snowyfly的博客
08-23 287
JS交互
js 中的元素和事件介绍
hnas_better的专栏
12-02 1980
在开发的过程中总遇到js的事件和元素，然后找网页查看，虽然是一找就能找到但是每次都得找，具体得元素跟事件没有完整得，把网上找到得东西做了一个总结与大家分享：以下是js中得事件和浏览器得支持情况：onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被
JS事件（含操作元素详细内容）
weixin_59425810的博客
02-02 399
一、事件分为三部分: 1事件源:事件被触发的对象 先写一个button按钮元素（id=“btn”），然后js中用document.getElementById（'btn'）得到事件源 2事件类型:如何触发，什么事件（鼠标点击onclick？经过？） 3事件处理程序:通过函数赋值方式完成 代码: <button id='btn'>唐伯虎〈button〉 var btn＝document.getElementById（'btn'）; btn.onclick=function（）{
JS交互
jun_qiang的博客
03-27 556
public class MainActivity extends AppCompatActivity { WebView web_view; Button but_js; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setCon...
JS实现为动态创建的元素添加事件操作示例
10-18
本篇文章将详细介绍如何使用 JavaScript（包括原生 JavaScript 和 jQuery）为动态创建的元素添加事件。 1. **原生 JavaScript 实现** 在原生 JavaScript 中，我们可以使用 `addEventListener` 或 `attachEvent`...
原生JS操作网页给p元素添加onclick事件及表格隔行变色
10-26
在本篇内容中，将讨论如何使用原生JS来实现给网页中的所有段落（p元素）添加onclick事件，以及如何实现一个特定表格的隔行变色效果。 首先，了解onclick事件是非常基础且重要的。onclick事件属于JavaScript中事件...
《前端开发实践：JavaScript打造响应式滑动窗口》-涵盖交互设计、事件处理、DOM操作，助力网页交互与用户界面优化
最新发布
05-03
《前端开发实践：JavaScript打造响应式滑动窗口》是一篇专为前端开发者、网页设计师及对用户界面交互感兴趣的学习者准备的技术文章。它不仅提供了一套全面且实用的滑动窗口制作指南，还通过具体的实例深入浅出地介绍...
js 动态给元素添加、移除事件的实现方法
10-21
在JavaScript开发中，动态给元素添加和移除事件处理程序是非常常见的操作，它们允许我们根据用户的交互或其他情况对页面上的元素作出响应。这篇文章主要介绍了如何使用JavaScript内置的方法addEventListener和...
JS html事件冒泡和事件捕获操作示例
10-17
总之，事件冒泡和事件捕获是JavaScript中处理DOM事件的重要机制，理解它们的工作原理有助于更好地控制网页交互，创建更加动态和响应式的用户体验。通过实践和试验，开发者可以熟练掌握这两种机制，从而在项目中灵活...
Js交互
aishangqian的博客
03-03 303
** WebViewActivity页面 ** package cj.com.a1609aproject.view.activity; import android.util.Log; import android.view.View; import android.webkit.JsResult; import android.webkit.ValueCallback; import andr...
js交互
Aasons的博客
03-03 256
package com.example.aason.disanzhoumoni.fragment; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragmen...
js 触发元素事件
weixin_66705999的博客
04-12 2578
click事件 // 触发click事件 let img = document.querySelector('img') img.addEventListener('click', function () { console.log(123); }) // 自动触发 img.click() 非click事件 // 触发元素的非click事件 -- 实现步骤 // 1、创建一个自定义事件对象，HtmlEvents--说明要触发的是事件中的元
简单JS交互
weixin_44668058的博客
05-05 1277
建立完之后，里面放入Html， 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
js中的元素事件篇
Fairy的博客
01-12 1620
元素的事件绑定： 三种元素创建 document.write('标签及内容') 对象.innerHTML='标签及内容' document。createElement（） 如果是在页面加载完毕后，用document.write()创建元素，会导致原页面所有内容都被撤销掉了1.addEventListener（"事件类型（on）",function,false）==...
JS基本交互
爱敲代码的狼仔
08-10 2126
1.运算符与表达式 概念 运算符：用于执行程序代码的运算，针对于一个以上的操作数进行运算 1 + 1 ： 1---操作数 +：运算符 表达式：由一个或多个操作数通过运算符组成是式子 1 + 1，a = 10, a++ 运算符：算术运算符、赋值运算符、逻辑运算符、比较运算符，三目运算符 1.1 算术运算符 种类：+ - * / %（取余，求模），++(自增，自加)， -- 基本操作 //1.算术运算符 + - * / %（取
2.02.17js交互.
m0_59593735的博客
03-07 419
2.07.17 1.js交互 1.警告框 只有一个按钮 语法：alert(""); 只能填一个字符串，为警告框提示语 没有返回值，返回值是undefined 2.对话框 有取消与确定两个按钮 语法：confirm(""); 只能填一个字符串，为对话框提示语 返回Boolean值，返回值为 true 或 false 3.输入提示框 有取消与确定两个按钮 语法：prompt(""); 可以填两个字符串，一个字符串为提示框提示语，一个为输入框默认输入 返回string值,当按取消按钮返
js中的事件（给元素绑定事件）
zhangjinlei00的专栏
11-17 5540
function func1(){         alert('hello');     }     //html 和 javascript相分离的时候,给这个元素绑定一个事件 document.getElementById('click2').onclick=function(){         alert('hehe'); } //addEventListener()参数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值