javascript_javascriptスキルでのイベント処理の詳細説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

javascript_javascriptスキルでのイベント処理の詳細説明

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:33 PM

クリックイベント javascript

1. イベント伝播メカニズム

クライアント側の JavaScript プログラム (つまり、ブラウザー) は、非同期のイベント駆動型プログラミングモデルを採用しています。 Web ブラウザは、ドキュメント、ブラウザ、要素、またはそれに関連するオブジェクトに何か興味深いことが起こったときにイベントを生成します。 JavaScript アプリケーションが特定の種類のイベントを考慮する場合、そのようなイベントが発生したときに呼び出される 1 つ以上の関数を登録できます。もちろん、このスタイルは Web プログラミングに固有のものではなく、グラフィカルユーザーインターフェイスを使用するすべてのアプリケーションで採用されています。

イベント処理について詳しく説明したいので、いくつかの基本概念から始めましょう:

①イベントの種類：は、どのような種類のイベントが発生したかを記述するために使用される文字列です。たとえば、「mousemove」はユーザーがマウスを移動したことを意味し、「keydown」はキーボードのキーが押されたことを意味します。イベントタイプは単なる文字列であり、イベント名

と呼ばれることもあります。

②イベント対象：は、イベントが発生する、またはイベントに関連するオブジェクトです。 Window、Document、Element オブジェクトは、最も一般的なイベントターゲットです。もちろん、AJAX の XMLHttpRequest オブジェクトもイベントターゲットです。

③イベントハンドラ：はイベントを処理したり応答したりする関数で、イベントリスナーとも呼ばれます。アプリケーションは、イベントタイプとイベントターゲットを指定して、Web ブラウザにイベントハンドラーを登録します。

④イベントオブジェクト：は、特定のイベントに関連し、イベントに関する詳細情報を含むオブジェクトです。イベントオブジェクトはパラメーターとしてイベント処理関数に渡されます (ただし、IE8 以前のバージョンでは、グローバル変数event がイベントオブジェクトです)。イベントオブジェクトには、イベントの種類を指定する type 属性と、イベントのターゲットを指定する target 属性があります (ただし、IE8 以前のバージョンでは、target の代わりに srcElement が使用されます)。もちろん、さまざまなタイプのイベントでは、関連するイベントオブジェクトの他の固有のプロパティも定義されます。たとえば、マウスイベントの関連オブジェクトにはマウスポインターの座標が含まれ、キーボードイベントの関連オブジェクトには押されたキーと修飾キーの詳細が含まれます。

以上で 4 つの基本概念が完成しました。ここで疑問が生じます。Web ページ上の要素 a のサブ要素 b をマウスを使用してクリックした場合、サブ要素 b に登録されているイベントハンドラーが最初に実行されるべきか、それとも要素 a に登録されているイベントハンドラーが実行されるべきですか。まず (要素 a とその子要素 b の両方にイベントハンドラーが登録されていると仮定します)?読者として、この質問について考えたことはありますか?

この問題には、ブラウザのイベント伝播メカニズムが関係しています。イベントバブルやイベントキャプチャーというのは皆さんも聞いたことがあると思います！はい、これらはブラウザのイベント伝播メカニズムです。写真も真実も添付写真もありませんか？では、どうすれば寛大になれるのでしょうか:

この図を読んだ後、ブラウザのイベント伝播メカニズムについて大まかに理解できたと思います。イベントが発生すると、イベントはまずブラウザの最上位オブジェクトである Window から、そのオブジェクトに渡されます。イベントをトリガーした要素、これがイベントキャプチャプロセスです。ただし、まだすべてが終わったわけではありません。イベントはこの要素からイベントバブリングプロセスである Window オブジェクトまで渡されます (ただし、IE8 およびその以前のバージョンでは、イベントモデルはキャプチャプロセスを定義するだけです)。発泡プロセス）。

ということで、上記の質問ですが、要素aで登録されたイベントハンドラがキャプチャ処理中かバブリング処理中かによって異なります。では、キャプチャプロセスにイベントハンドラーを登録するとは具体的に何でしょうか。また、バブリングプロセスにイベントハンドラーを登録する方法は何でしょうか?次に、イベントハンドラーを登録するいくつかの方法について説明します。

1. HTML タグの属性をイベントハンドラーとして設定します

ドキュメント要素のイベントハンドラー属性。その名前は、「on」とそれに続くイベント名で構成されます (例: onclick、onmouseover)。もちろん、このフォームでは DOM 要素のイベントハンドラーのみを登録できます。例:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
 #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
 #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
 </style>
</head>
<body>
 <div id="div1" onClick="console.log('div1');">div1
 <div id="div2" oNClick="console.log('div2');">div2
 <div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');">div3
 </div>
 </div>
 </div>
<script type="text/javascript">
</script>
</body>
</html>

ログイン後にコピー

结果（鼠标点击div3区域后）：

从结果中可以看出：

　　①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；

　　②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；

　　③这种形式是在事件冒泡过程中注册事件处理程序的；

2.设置JavaScript对象属性为事件处理程序

　　可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。实例：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
 #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
 #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
 </style>
</head>
<body>
 <div id="div1">div1
 <div id="div2">div2
 <div id="div3">div3
 </div>
 </div>
 </div>
<script type="text/javascript">
 var div1 = document.getElementById('div1');
 var div2 = document.getElementById('div2');
 var div3 = document.getElementById('div3');
　　div1.onclick = function(){
　　　　console.log('div1');
　　};
　　div2.onclick = function(){
　　　　console.log('div2');
　　};
　　div3.onclick = function(){
　　　　console.log('div3');
　　};
　　div1.onclick = function(){
　　　　console.log('div11111');
　　};

　　div1.onClick = function(){
　　　　console.log('DIV11111');
　　};

</script>
</body>
</html>

ログイン後にコピー

结果（鼠标点击div3区域后）：

从结果中可以看出：

　　①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；

　　②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；

　　③这种形式也是在事件冒泡过程中注册事件处理程序的；

3.addEventListener()

　　前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：

<!DOCTYPE HTML>
<html>
<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
　　<title>test</title>
　　<style type="text/css">
　　　　#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
　　　　#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
　　　　#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
　　</style>
</head>
<body>
　　<div id="div1">div1
　　　　<div id="div2">div2
　　　　　　<div id="div3">div3
　　　　　　</div>
　　　　</div>
　　</div>
<script type="text/javascript">
　　var div1 = document.getElementById('div1');
　　var div2 = document.getElementById('div2');
　　var div3 = document.getElementById('div3');
　　div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);
　　div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);
　　div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);
　　div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);
　　div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);
　　div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);
　　div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);
</script>
</body>
</html>

ログイン後にコピー

结果（鼠标点击div3区域后）：

从结果中可以看出：

　　①addEventListener()第三个参数的作用正如上面所说；

　　②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；

相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：

div1.addEventListener('click', div1BubbleFun, false);
div1.removeEventListener('click', div1BubbleFun, false);
function div1BubbleFun(){
 console.log('div1-bubble');
}

ログイン後にコピー

4.attachEvent()

　　但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：

var div1 = document.getElementById('div1');
div1.attachEvent('onclick', div1BubbleFun);
function div1BubbleFun(){
　　console.log('div1-bubble');
}

ログイン後にコピー

　　相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：

div1.detachEvent('onclick', div1BubbleFun);

ログイン後にコピー

　　到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！

二.事件处理程序的调用

1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
 </style>
</head>
<body>
 <div id="div1">div1</div>
 <script type="text/javascript">
 var div1 = document.getElementById('div1');
 if(div1.addEventListener){
 div1.addEventListener('click', div1Fun, false);
 }else if(div1.attachEvent){
 div1.attachEvent('onclick', div1Fun);
 }
 function div1Fun(event){
 event = event || window.event;
 var target = event.target || event.srcElement;
 console.log(event.type);
 console.log(target);
 }
 </script>
</body>
</html>

ログイン後にコピー

2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。

实例一：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
 </style>
</head>
<body>
 <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
 <script type="text/javascript">
 </script>
</body>
</html>

ログイン後にコピー

　　结果一：

　　从结果可以看出：

　　　　①第一种方法事件处理程序中this指向这个元素本身；

实例二：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
 </style>
</head>
<body>
 <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
 <script type="text/javascript">
 var div1 = document.getElementById('div1');
 div1.onclick = function(){
 console.log('div1.onclick:');
 console.log(this);
 };
 </script>
</body>
</html>

ログイン後にコピー

　　结果二：

　　从结果可以看出：

　　　　①第二种方法事件处理程序中this也指向这个元素本身；

　　　　②存在第二种方法时，它会覆盖第一种方法注册的事件处理程序；

实例三：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
 </style>
</head>
<body>
 <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
 <script type="text/javascript">
 var div1 = document.getElementById('div1');
 div1.onclick = function(){
 console.log('div1.onclick:');
 console.log(this);
 };
 div1.addEventListener('click', function(){
 console.log('div1.addEventListener:');
 console.log(this);
 }, false);
 </script>
</body>
</html>

ログイン後にコピー

　　结果三：

　　从结果可以看出：

　　　　①第三种方法事件处理程序中this也指向这个元素本身；

　　　　②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序；

实例四：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
 </style>
</head>
<body>
 <div id="div1" onclick="console.log('html:'); console.log(this);">div1</div>
 <script type="text/javascript">
 var div1 = document.getElementById('div1');
 div1.onclick = function(){
 console.log('div1.onclick:');
 console.log(this);
 };
 div1.attachEvent('onclick', function(){
 console.log('div1.attachEvent:');
 console.log(this === window);
 });
 
 </script>
</body>
</html>

ログイン後にコピー

　　结果四：

　　从结果可以看出：

　　　　①第四种方法事件处理程序中this指向全局对象Window；

　　　　②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序；

3.事件处理程序的调用顺序：多个事件处理程序调用规则如下：

　　①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；

　　②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用；

　　③使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；

4.事件取消：

①取消事件的浏览器默认操作（比如点击超链接元素会自动发生页面跳转的默认操作）：如果使用前两种方法注册事件处理程序，可以在处理程序中添加返回值false来取消事件的浏览器默认操作。在支持addEventListener()的浏览器中，也可以通过调用事件对象的preventDefault()方法取消事件的默认操作。至于IE8及其之前的浏览器可以通过设置事件对象的returnValue属性为false来取消事件的默认操作。参考代码：

function cancelHandler(event){
 var event = event || window.event;
 if(event.preventDefault){
 event.preventDefault();
 }
 if(event.returnValue){
 event.returnValue = false;
 }
 return false;
}

ログイン後にコピー

②取消事件传播：在支持addEventListener()的浏览器中，可以调用事件对象的一个stopPropagation()方法阻止事件的继续传播，它能工作在事件传播期间的任何阶段（捕获期阶段、事件目标本身、冒泡阶段）；但是在IE8以及其之前版本的浏览器中并不支持stopPropagation()方法，而且这些浏览器也不支持事件传播的捕获阶段，相应的，IE事件对象有一个cancelBubble属性，设置这个属性为true能阻止事件进一步传播（即阻止其冒泡）。参考代码（阻止发生在div3区域的点击事件冒泡到div2和div1）：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
 #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
 #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
 </style>
</head>
<body>
 <div id="div1">div1
 <div id="div2">div2
 <div id="div3">div3
 </div>
 </div>
 </div>
 <script type="text/javascript">
 var div1 = document.getElementById('div1');
 var div2 = document.getElementById('div2');
 var div3 = document.getElementById('div3');
 　　 div1.onclick = function(){
 console.log('div1');
 　　 };
 　　 div2.onclick = function(){
 console.log('div2');
 　　 };
 　 　div3.onclick = function(event){
 stopEventPropagation(event);
 console.log('div3');
 　　 };
 
 function stopEventPropagation(event){
 var event = event || window.event;
 if(event.stopPropagation){
 event.stopPropagation();
 }else{
 event.cancelBubble = true;
 }
 }
 </script>
</body>
</html>

ログイン後にコピー

上記は JavaScript イベント処理の完全な紹介です。もちろん、イベントプロキシまたはイベントデリゲーションと呼ばれるものについては、活用できる点がまだあります。この知識は将来更新される予定です。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7613

CakePHP チュートリアル

1387

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

136

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワークプロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラデバイスがあるとします。

See all articles

javascript_javascriptスキルでのイベント処理の詳細説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック